Password Strength
betaA strength meter and rule checklist under a password field: length, mixed case, a number, a symbol, and not a common password — or your own rules.
- Forms
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add password-strengthNo npm packages are needed beyond what Dowel already requires.
import { PASSWORD } from "@/components/ui/password-strength";Default
Meter Only
<PasswordStrength>
| Prop | Type | Default |
|---|---|---|
value (required)The password to assess. | string | — |
minLengthMinimum length for the default rules. Default 12. | number | 12 |
onScoreChangeCalled with the score whenever it is computed, to gate a submit button, say. | (score: PasswordScore) => void | — |
rulesThe rules to check, in order. Default: | readonly PasswordRule[] | — |
showRulesShow the rule checklist under the meter. Default true. | boolean | true |
Plus every attribute of <div> except children.
The meter is role="meter" with the level as its value text ("Fair", "Strong"), so it is never colour alone. The level is announced politely as it changes; the rule list is not live, so a screen reader does not read it on every keystroke. Each rule says in words whether it is met. Point the password field's aria-describedby at this component so the rules are read with it. A client-side check is guidance, not security: check against breach data on the server too.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes