PasswordInput
Password input with reveal toggle and optional strength meter
Category: inputs · WCAG 2.2-AA · form, password, input, security
Sizes
- sm
- md
- lg
States
- idle
- revealed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showStrengthMeter | boolean | false | When true, shows a password-strength meter. |
size | 'sm' | 'md' | 'lg' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
labels | PasswordInputLabels | — | Overrides for the component’s user-visible strings (i18n). |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
placeholder | string | — | Placeholder text shown when the field is empty. |
value | string | — | The controlled value. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Called when the value changes. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-accent--cascivo-color-destructive--cascivo-color-warning--cascivo-color-success--cascivo-radius-input--cascivo-focus-ring
When to use
- Collecting a secret credential that should be masked by default with an opt-in reveal toggle
- Password creation flows that benefit from inline strength feedback
When not to use
- Non-secret text — use Input
- A fixed-length one-time verification code — use OtpInput
How to build an accessible PasswordInput in React →
Examples
Basic
<PasswordInput placeholder="Enter password" />With strength meter
<PasswordInput showStrengthMeter placeholder="Create password" />