Password strength

Installation#

pnpm dlx shadcn@latest add @zui/password-strength

The CLI writes components/feedback/password-strength.tsx, installs Card, Progress, Text and Icon with the items they need, and adds lucide-react-native.

Usage#

import {
  PasswordStrength,
  PasswordStrengthMeter,
  PasswordStrengthRequirement,
  PasswordStrengthRequirements,
} from '@/components/feedback/password-strength';

<PasswordStrength strength="fair">
  <PasswordStrengthMeter valueText="Fair">Password strength</PasswordStrengthMeter>
  <PasswordStrengthRequirements>
    <PasswordStrengthRequirement met>At least 15 characters</PasswordStrengthRequirement>
    <PasswordStrengthRequirement>Not your name or email</PasswordStrengthRequirement>
  </PasswordStrengthRequirements>
</PasswordStrength>

Place it under a new password field, such as a Password input. The caller rates the password and writes every word. NIST SP 800-63B rev 4 asks a verifier to check a password's length and to refuse one that is commonly used or contains the person's own data, and not to require a mix of character classes, so the requirements name those checks and nothing like "one uppercase letter".

Composition#

PasswordStrength
|-- PasswordStrengthMeter
`-- PasswordStrengthRequirements
    `-- PasswordStrengthRequirement

API reference#

PasswordStrength#

Takes every prop of Card, small unless size says otherwise, plus:

PasswordStrengthMeter#

Takes every prop of CardContent except children, plus:

The bar is a Progress filled a third for weak, two thirds for fair and full for strong. valueText is the bar's value text and sits in a text with accessibilityLiveRegion="polite", which Android reads out when it changes. On iOS a change after the first render is passed to AccessibilityInfo.announceForAccessibility instead, so each platform speaks it once. The first value is not announced.

PasswordStrengthRequirements#

Takes every prop of CardContent. Its children are the requirements.

PasswordStrengthRequirement#

Takes every prop of View except children, plus:

met draws a circle-check and foreground text; otherwise a circle and muted text. The requirement is one element for a screen reader whose value text is metLabel or unmetLabel, so the state is read with the requirement. Pass both in the app's language.