Password Field
Collects a password with accessible visibility controls and Caps Lock feedback.
@rivetui/password-fieldPreview
Explore each composition interactively, then open its code in the same context.
Default
Keep native password-manager behavior while providing an accessible visibility control.
Use the password for this workspace.
Initial visibility
The field can start hidden or visible without changing the submitted value.
Validation
The invalid state remains restrained until keyboard focus is visible.
Use at least 12 characters.
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/password-fieldPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
| Prop | Type | Default |
|---|---|---|
visible | boolean | — |
defaultVisible | boolean | false |
onVisibleChange | (visible: boolean) => void | — |
showCapsLockIndicator | boolean | true |
showPasswordLabel | string | "Show password" |
hidePasswordLabel | string | "Hide password" |
capsLockLabel | string | "Caps lock is on" |
inputClassName | string | — |
className | string | — |