| ariaToggleLabel | Toggle password visibility | string |
Sets the accessible label (aria-label) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. "Show password" or "Hide password". |
| className | - | string |
A string of all className you want applied to the component. |
| defaultShowPassword6.0.0+ | - | boolean |
The initial visibility of the password for the uncontrolled mode — read once on mount. Ignored when showPassword is set. |
| delay | - | number, boolean |
Enables delayed onChange execution for improved performance in React password inputs. - true delays the onChange callback by 500ms. - You can also pass a custom delay (in milliseconds) as a number. |
| disabled | - | boolean |
Disables the password input field. When true, the user cannot interact with the field, and the visibility toggle is disabled with it. |
| feedback4.2.0+ | - | ReactNode |
Feedback for the current validationState — rendered only while the state is set, and styled after it. For the client-side mode, where the browser owns the state, use feedbackValid and feedbackInvalid instead. |
| feedbackInvalid4.2.0+ | - | ReactNode |
Feedback the stylesheet reveals while the control is invalid — always rendered, so it works with client-side validation, where the browser decides the state. |
| feedbackValid4.2.0+ | - | ReactNode |
Feedback the stylesheet reveals while the control is valid — always rendered, so it works with client-side validation, where the browser decides the state. |
| floatingClassName4.5.0+ | - | string |
A string of all className you want applied to the floating label wrapper. |
| floatingLabel4.2.0+ | - | ReactNode |
Provide a floating label for the component — the text rests inside the field and floats once it has focus or a value. |
| floatingLabelAlways6.0.0+ | - | boolean |
Keeps the floating label floated and the placeholder visible while the field is empty. |
| hideIcon | - | ReactNode |
The artwork of the toggle while the password is visible. Defaults to a crossed-out eye drawn on currentColor. |
| invalidDeprecated 6.0.0 | - | boolean |
Mark the control invalid. Use validationState="invalid" instead — invalid is ignored when validationState is set. |
| label4.2.0+ | - | ReactNode |
Add a caption for a component. |
| onChange | - | ChangeEventHandler<HTMLInputElement> |
Callback triggered when the value of the password input changes. If delay is set, the callback is called after the specified timeout. |
| onShowPasswordChange6.0.0+ | - | ((showPassword: boolean) => void) |
Callback fired when the visibility toggle requests a new state, receiving the requested visibility. |
| onValidationStateChange6.0.0+ | - | ((validationState: ValidationState | undefined) => void) |
Callback fired with undefined when the user changes the value, or the form is reset, while validationState (or the deprecated invalid) is set. A given state is a verdict on the value it was given for; clear it here to let the browser's own validation show again. |
| readOnly | - | boolean |
Makes the React password input read-only. Prevents user input but allows text selection. |
| showIcon | - | ReactNode |
The artwork of the toggle while the password is hidden. Defaults to an eye drawn on currentColor. |
| showPassword | - | boolean |
The controlled visibility of the password — true renders the input as type "text" instead of "password". Pair it with onShowPasswordChange; for the uncontrolled mode use defaultShowPassword instead. |
| size | - | 'sm', 'lg' |
Sets the visual size of the password input. Use 'sm' for small or 'lg' for large input fields. |
| text4.2.0+ | - | ReactNode |
Add helper text to the component. |
| tooltipFeedback4.2.0+ | - | boolean |
Display validation feedback in a styled tooltip. |
| validDeprecated 6.0.0 | - | boolean |
Mark the control valid. Use validationState="valid" instead — valid is ignored when validationState is set. |
| validationState6.0.0+ | - | 'valid', 'invalid', string |
The validation state, rendered as the is-{state} class; 'invalid' also sets aria-invalid and blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. The user's next change of the value asks to drop it through onValidationStateChange. |
| value | - | string, number, string[] |
The value of the password input field. To make the input controlled, pair this with the onChange handler. |