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