Password Input

Forms

A text input with a built-in visibility toggle for password fields.

Password inputs keep secrets out of sight while making them easy to reveal. Shelf's password input composes the regular Input with a ghost icon button that toggles the field between masked and plain text.

npx shadcn@latest add password-input

Basic usage

Masked by default, with an eye icon to reveal the value.

Preview

Live

tsx

1<PasswordInput placeholder="Enter your password" className="w-64" />

Controlled

Value and onChange behave exactly like a plain input.

Preview

Live

Length: 0

tsx

1const [value, setValue] = useState("")
2
3<PasswordInput
4  value={value}
5  onChange={(event) => setValue(event.target.value)}
6  placeholder="Type a secret…"
7/>

With a label

Pair with the Label component for accessible form fields.

Preview

Live

Password

tsx

1<Label htmlFor="password">Password</Label>
2<PasswordInput id="password" placeholder="••••••••" className="w-64" />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
value	string	The controlled password value.
onChange	ChangeEventHandler<HTMLInputElement>	Called when the value changes.
placeholder	string	Placeholder shown while the field is empty.
disabled	boolean= false	Disables the input and toggle button.
className	string	Additional classes merged into the input.