A password field with a show and hide button, a four segment strength bar and a checklist of rules that tick as they are met.
npx shadcn@latest add https://hyperblur.dev/r/input-password-strength.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-password-strength.tsx.
import { InputPasswordStrength } from "@/components/hyperblur/input-password-strength"
<InputPasswordStrength label="Create password" onValueChange={(value, level) => console.log(level)} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Controlled value. Pair with onValueChange. | |
| defaultValue | string | "" | Initial value when uncontrolled. |
| onValueChange | (value: string, level: number) => void | Called on every edit with the text and a strength level from 0 to 4. | |
| label | string | "Password" | Label shown above the field. |
| rules | { label: string; test: (value: string) => boolean }[] | 4 built-in rules | Rules to check. Strength is the share of rules met, mapped to four levels. |
| showRules | boolean | true | Show the rule checklist. |
| accent | string | "#2f7bff" | Focus color. |
| name, placeholder, id, required, ... | InputHTMLAttributes | Other input attributes are forwarded to the input. className and style go to the root. |