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 |
|---|---|---|---|---|
| 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 |
| placeholder | placeholder text | string | ---- | False |
| 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 |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | 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 |