Password strength
Show how strong a new password is while it is typed.
pnpm dlx shadcn@latest add @uiarc/password-strengthLive · keyboard ready
- Sign up and change password forms.
- Password rules that should check off live as the person types.
- Use password-field for sign in.
- Use progress for measurable progress unrelated to passwords.
Installation
Add Password strength with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/password-strengthAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { PasswordStrength } from "@/components/arc/password-strength/password-strength"; export function NewPasswordField() { const [strong, setStrong] = useState(false); return ( <PasswordStrength label="New password" name="password" autoComplete="new-password" onValueChange={(_, strength) => setStrong(strength.level >= 3)} /> );}Gate submit on strength
example.tsx
const [level, setLevel] = useState(0); <PasswordStrength label="New password" name="password" autoComplete="new-password" onValueChange={(_, strength) => setLevel(strength.level)}/><Button type="submit" disabled={level < 3}>Create account</Button>PasswordStrength
A new-password field with a four-segment meter, rule checklist, and a morphing strength word.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the input.valuestring–Controlled password.defaultValuestring""Initial value when uncontrolled.onValueChange(value: string, strength: PasswordStrengthResult) => void–Called on every change with the value and its { level, label, met } score.rulesPasswordRule[]defaultPasswordRules{ id, label, test, remaining? } rules. Strength is the share met across four steps.errorstring–Error copy; sets aria-invalid and shakes the field once per new error.revealedboolean–Controlled show or hide state.onRevealedChange(revealed: boolean) => void–Called when the reveal toggle is pressed....propsOmit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "children">–Forwarded to the input, including ref, name, autoComplete, and onChange.- EnterorSpace
- On the reveal button, shows or hides the password.
- The meter is role="meter" with aria-valuenow 0 to 4 and aria-valuetext set to the strength word.
- The rules list is linked to the input through aria-describedby along with any error; errors set aria-invalid.
- A role="status" region summarizes strength and rules met; the reveal button uses aria-pressed and aria-controls.
- Segments fill and change tone in a staggered wave, rules check off with drawn ticks, remaining counts roll, and the word morphs up or down with strength.
- Reduced motion, applied after hydration, drops the shake, wave, and roll in favor of instant changes.
- On coarse pointers the input grows to the base font size, so iOS does not zoom on focus.
- The four-segment meter shares the row width evenly and shrinks with the column.
- Scoring runs on the device on every keystroke with simple rule tests; there is no dictionary check.
- One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when creating or changing a password. Use password-field for sign in.
- Controlled or uncontrolled; read strength from onValueChange to gate submit. Scoring runs on the device.
- Also exports estimateStrength(password, rules) and defaultPasswordRules for server-side checks or custom rule sets.
The full library index for assistants is at /llms.txt.