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 | Description | Type | Default | Required |
|---|---|---|---|---|
| label | The input's label text, required for accessibility | string | Password | False |
| disabled | The underlying input element disabled attribute | enum boolean | ---- | False |
| name | The name for the underlying input element | string | ---- | True |
| required | The input elements required attribute | enum boolean | ---- | False |
| value | The input element value for controlled components | string | ---- | False |
| onChange | Callback executed when the input fires a change event | (event: ChangeEvent<HTMLInputElement>) => void | ---- | False |
| defaultValue | The initial input element value for uncontrolled components | string | ---- | False |
| id | The id for the underlying input element. Required for accessibility | string | ---- | True |
| onFocus | Callback executed when the input fires a focus event | FocusEventHandler<HTMLInputElement> | ---- | False |
| onBlur | Callback executed when the input fires a blur event | FocusEventHandler<HTMLInputElement> | ---- | False |
| error | Indicates there is an error | enum boolean | ---- | False |
| errorMessage | Text displayed below the input to describe the cause of the error | enum ReactNode | ---- | False |
| helperText | Text displayed below the input to provide additional context | enum ReactNode | ---- | False |
| success | indicates there is a success | enum boolean | ---- | False |
| hideButtonIconText | Accessible text for the hide icon button | string | Hide password text | False |
| showButtonIconText | Accessible text for the show icon button | string | Show password text | False |