Anatomy
Note: Image is not to scale
- Password value
- Password Label
- Input container
- Button Icon
Options
Helper Text
Helper text can be added to the input.
Behavior
Hidden value
The password input by default renders the password hidden.
Focus
Click password input to demostrate the focus state.
Error
Disabled
Text Overflow
Guidance
Ensure the width of the field appropriately sized
Password lengths can vary based on user preference; ensure any reasonably long password will be fully visible within the input.
API Reference
Prop | Type | Default | Required |
---|---|---|---|
label | string | Password | False |
disabled | enum boolean | ---- | False |
name | string | ---- | True |
required | enum boolean | ---- | False |
value | string | ---- | False |
onChange | (event: ChangeEvent<HTMLInputElement>) => void | ---- | False |
defaultValue | string | ---- | False |
id | string | ---- | True |
onFocus | FocusEventHandler<HTMLInputElement> | ---- | False |
onBlur | FocusEventHandler<HTMLInputElement> | ---- | False |
error | enum boolean | ---- | False |
errorMessage | enum ReactNode | ---- | False |
helperText | enum ReactNode | ---- | False |
success | enum boolean | ---- | False |
hideButtonIconText | string | Hide password text | False |
showButtonIconText | string | Show password text | False |