Password Input

Password field with a reveal toggle, Caps Lock warning, four-segment strength meter and a rule checklist.

New in 1.7.Built on Icons and Input.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/password-input.json

import { PasswordInput } from "@/components/ui/password-input"

<PasswordInput label="New password" strength rules />

Field supplies the label, the error and aria-describedby. Hold Caps Lock while typing to see the warning.

value and visible are both controlled here: Generate fills a 20-character password and reveals it.

Pass rules for the checklist and evaluate to score by them instead of the built-in estimate.

Built on Input, so label, description, size, leading and the other Input props work. The ref points at the input element.

Prop	Type	Default
`value`	`string` Controlled value.	None
`defaultValue`	`string` Starting value when uncontrolled. A form reset goes back to it.	`""`
`onValueChange`	`(value: string) => void` Called on every edit. onChange still works.	None
`visible`	`boolean` Controlled reveal. Shown as text, the value is set in mono so l, 1, I, O and 0 differ.	None
`defaultVisible`	`boolean` Starting reveal state when uncontrolled.	`false`
`onVisibleChange`	`(visible: boolean) => void` Called when the eye button is pressed.	None
`strength`	`boolean` Shows the four-segment meter and a Weak, Fair, Good or Strong label.	`false`
`rules`	`boolean \| PasswordRule[]` Shows a checklist. true uses length, a number, upper and lower case, and a symbol.	`false`
`minLength`	`number` Length the default rule and the estimate ask for. Set on the input (and so checked by the browser) only when you pass it.	`12`
`evaluate`	`(value: string, passed: Record<string, boolean>) => PasswordStrength` Replaces the built-in estimate. passed says which rules pass, by id.	None
`capsLockWarning`	`boolean` Shows a Caps Lock badge in the field while it's on, and announces it.	`true`
`error`	`ReactNode` Turns the field red and shows the message under the checklist. true for the red state alone.	None
`autoComplete`	`string` "new-password" when strength or rules is on, so password managers offer to generate one.	`"current-password"`

Prop	Type	Default
`id`	`string` Key in the passed record.	None
`label`	`ReactNode` Checklist text.	None
`test`	`(value: string) => boolean` True when the rule is met.	None

evaluatePassword(value, minLength?) is exported too, for gating a submit button.

Prop	Type	Default
`score`	`0 \| 1 \| 2 \| 3 \| 4` Segments lit. 0 is empty.	None
`label`	`string` Shown next to the meter and announced when it changes.	None

The eye button is a toggle with aria-pressed and a fixed name, Show password. Clicking it keeps focus and the caret in the field.
The input's aria-describedby lists the Caps Lock status, the strength label, the checklist and the message, so a screen reader reads them after the label. Field's own ids are kept.
The strength label is a polite live region, so it speaks when the label changes, not on every key.
The estimate scores length times character variety and takes off for runs (abc, 321), repeats and about 25 common passwords, leetspeak included. It runs on every keystroke and never leaves the page.
Inside Field, the field turns red with Field's error, because Field marks it aria-invalid.