Password Strength

1
2
3'use client';

import { useState, type ReactNode } from 'react';

Installation#

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

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 met={false}>Not your name or email</PasswordStrengthRequirement>
  </PasswordStrengthRequirements>
</PasswordStrength>

Place it under a new password field. 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#

Renders shadcn's Card and takes every prop it takes, small unless size says otherwise. strength is weak, fair or strong; the root carries it as data-strength and sets data-slot="password-strength".

PasswordStrengthMeter#

Renders shadcn's Progress and takes every prop it takes except value, min, max and getAriaValueText. Its children are the meter's name; valueText is the strength in words, shown beside the name and read as the bar's value. The bar fills one step of three for weak, two for fair and three for strong. A polite live region beside the bar announces valueText when it changes. It sets data-slot="password-strength-meter".

PasswordStrengthRequirements#

A ul that takes every prop a ul takes. It sets data-slot="password-strength-requirements".

PasswordStrengthRequirement#

An li that takes every prop an li takes. Its children are the requirement. met shows a circle-check and foreground text; otherwise a circle and muted text. The icons are hidden from a screen reader, which hears metLabel (default Met) or unmetLabel (default Not met) after the children instead; pass both in the app's language. It carries data-met while met and sets data-slot="password-strength-requirement".