Default
- Done: At least 12 characters
- Done: A number or a symbol
- Not a common password
PasswordRules
The password requirements under a new-password field, each ticked as it is met; the count is announced when typing pauses.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: List, with a polite live region for the count
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
With a field
- At least 12 characters
- A number or a symbol
- Not a common password
Tokens
The 5 design tokens PasswordRules reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 5 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.icon.default | … | --sd-color-icon-default |
| color.icon.success | … | --sd-color-icon-success |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/password-rulesThen import it
import { PasswordRules } from "@/components/ui/password-rules"Props
| Prop | Type | What it does |
|---|---|---|
rulesrequired | PasswordRule[] | The requirements, in the order they are shown, each with whether it is met. |
label | stringDefault 'Your password needs' | The list's accessible name. Default "Your password needs". |
id | string | Put this id in the new-password field's aria-describedby so the rules are read with the field. |
announceDelay | numberDefault 1000 | How long the rules must stay the same before the count is announced (typing has paused). Default 1000ms. |
className | string |
When to use it
Use it for
- Creating or changing a password
- Any new secret with rules people must meet
Use something else for
- Signing in: never show rules on a current-password field
- Errors after submitting: use the field's errorMessage
Accessibility
Screen readers announce "Your password needs, list, 3 items. Done: At least 12 characters"; after typing pauses, "2 of 3 requirements met".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9.
Not interactive: density changes spacing only.
What your product still has to do
- Put the rules' id in the new-password field's aria-describedby
- Work out met for each rule from the current value; the component only shows it
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 135 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 4 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 0 focus stops in 0 browser engines: all pass |
Manual passes with VoiceOver and NVDA haven’t been done yet.
In Figma
The Figma component is PasswordRules. The Figma library isn’t published yet.
Figma to code: Rules → rules; nested Rule → rules.