PasswordInput
Password input with show/hide that never loses focus.
Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add password-inputDependencies
What add password-input installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils@zuno/input
Examples
1 examples · 1 componentShow or hide
The button reveals the password without losing context.
API reference
Forwards props and ref to the container element; it only adds composition utilities.
| Prop | Type | Default |
|---|---|---|
...InputPropsAccepts every Input prop, including value/defaultValue. | — | — |
autoCompleteSuggested: current-password or new-password. | string | — |
States
The states that apply to this component and their visual treatment.
| State | Treatment |
|---|---|
| Hidden | The value is masked by default. |
| Visible | The button toggles visibility (aria-pressed). |
| Focus preserved | Toggling does not move the field's focus or cursor. |
| Inherits from Input | Rest, focus, invalid and disabled as in Input. |
Accessibility
The button toggles aria-pressed and its aria-label describes the action (show/hide).
Showing the password does not move focus out of the field; the value and cursor are preserved.