Password strengthPro
New-password field with show / hide, a four-step meter and a live rules checklist.
Weak
- At least 12 characters(not met)
- Upper and lower case letters(not met)
- A number(met)
- A symbol(not met)
When to use
- Sign-up and change-password forms.
When not to use
- Sign-in forms: don't hint at rules when people enter an existing password.
Installation
Usage
Import it from @/components/ui/password-strength after installing.
example.tsx
import { PasswordStrength } from "@/components/ui/password-strength";
<PasswordStrength name="password" onValueChange={setPassword} />API reference
PasswordStrength
A labelled new-password field with reveal, meter and checklist.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string | – | Controlled or uncontrolled. |
| rules | { label; test(password) }[] | defaultRules | Your policy; the meter counts passed rules (up to four). |
| label / id / name | string | "Password" | Field attributes. |
defaultRules
12+ characters, mixed case, a number, a symbol.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach the show / hide button |
Accessibility
- autocomplete="new-password" so password managers offer to generate one.
- The strength word is announced politely; each rule reads as met or not met.
- Reveal is a toggle button with aria-pressed.
Motion
- Meter segments fill in sequence; each met rule pops its check.
Responsive behavior
- Up to 384px wide.
Performance
- Rules run on each keystroke; keep tests simple.
Notes for AI
- Enforce the same rules on the server; the meter is guidance only.
This page as Markdown, for assistants and coding agents:
/components/password-strength/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt