Password Requirements
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { PasswordRequirements } from "@corew500/ui/password-requirements"
<PasswordRequirements>Content</PasswordRequirements>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| password* | string | — | Current password value to validate |
| requirements | PasswordRequirement[] | [ { id: "length", label: "At least 8 characters", validator: (p) => p.length >= 8, }, { id: "uppercase", label: "One uppercase letter", validator: (p) => /[A-Z]/.test(p), }, { id: "lowercase", label: "One lowercase letter", validator: (p) => /[a-z]/.test(p), }, { id: "number", label: "One number", validator: (p) => /\d/.test(p), }, ] | Requirements to check against |
| title | string | — | Optional title displayed above requirements |
| className | string | — | Additional CSS classes |
Accessibility
Screen Readers
- - Uses `aria-live="polite"` to announce requirement changes to screen readers.
- Visual icons have `aria-hidden="true"` with screen-reader text for each state.
- Requirements list uses semantic `<ul>` with `role="list"`.
Additional
- Color is not the only indicator; icons supplement color coding.
Localization
Translatable Content
- - Requirement labels should be translated before passing to component.
- Title text should be localized via `title` prop.
Additional
- Screen reader announcements ("requirement met/not met") are hardcoded in English.