A text input that masks its value by default, with a trailing toggle button (eye / eye-off) to reveal it.
tsx
<PasswordInput label="Password" />label
Examples
Same label/description/error/success model as Input — useful
for surfacing password rules or a strength check:
tsx
At least 8 characters.
Password must be at least 8 characters.
<PasswordInput label="Password" description="At least 8 characters." />
<PasswordInput label="Password" error="Password must be at least 8 characters." />The reveal toggle is local UI state the component manages itself — it doesn't change the field's
type prop or require anything from the consumer beyond rendering it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | text | — | — |
| description | text | — | — |
| error | text | — | — |
| label | text | — | — |
| size | s | m | l | "m" | — |
| success | text | — | — |