Password field with an eye toggle that blinks and draws its slash, a four-segment strength meter that springs in, and an optional requirements checklist.
passwordinputformstrength meterauthsign up
Installation
$npx shadcn@latest add @geturui/password-input
Also installs: Input
Usage
usage.tsx
1import { PasswordInput } from "@/components/ui/password-input";
2
3export function NewPassword() {
4 return (
5 <PasswordInput
6 label="New password"
7 autoComplete="new-password"
8 requirements={[
9 { label: "At least 12 characters", test: (v) => v.length >= 12 },
10 { label: "A number", test: (v) => /\d/.test(v) },
11 ]}
12 />
13 );
14}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showStrength | boolean | true | Show the strength meter and its word (Weak, Fair, Good, Strong). |
scorer | (value: string) => 0 | 1 | 2 | 3 | 4 | scorePassword | Custom strength scorer. The default weighs length, mixed case, digits and symbols. |
requirements | { label: string; test: (value: string) => boolean }[] | — | Checklist under the meter; each row ticks with a spring when its test passes. |
defaultVisible | boolean | false | Start with the password shown. |
onVisibleChange | (visible: boolean) => void | — | Called when the eye toggle flips. |
...InputProps | InputProps | — | label, hint, error, size, iconLeading, value/onChange and every input attribute. Defaults to a lock icon and autoComplete="current-password". |
Accessibility
- The toggle is a real button named "Show password" with aria-pressed and aria-controls, so its state is announced, not just drawn.
- The meter has role="meter" with aria-valuetext (Weak to Strong), and the strength word sits in a polite live region.
- Requirement rows carry a visually hidden met / not met so the checklist is not colour-only.