Password Strength

Description

PasswordStrength is a single <div> that renders a five-segment strength meter and, optionally, a "Your password must include:" checklist. It is a controlled, presentational component: it does not read or score a password itself. The parent computes a strength level (0 to 5) and a rules array, and the component renders that state.

Reach for it next to a password input in signup, reset, and change-password forms. Pair it with an InputGroup password field and recompute strength + rules on every keystroke so the meter and the checklist update live. The optional rules prop lets you spell out the requirements; drop it for a compact meter-only readout.

Don't treat it as a validator. It shows the result of scoring you do in the parent, so enforce real password policy on submit (and on the server). For inline field errors use Field. For a plain progress bar with no password semantics use Progress.

Installation

pnpm dlx @create-ui/cli add password-strength

Usage

import { PasswordStrength } from "@/components/ui/password-strength"

<PasswordStrength
  strength={3}
  rules={[
    { label: "Use at least 8 characters.", met: true },
    { label: "Mix letters, numbers, and symbols.", met: true },
    { label: "Avoid common words or patterns.", met: false },
  ]}
/>

Examples

Every example is a Pro preview (marked with a Pro badge). Each one derives strength and rules from a sample password with a small scoring function, the way you would in a real form, so swap in your own policy as needed.

Strength Levels

strength runs from 1 to 5 and drives both the meter fill and the label color: 1 Too Weak (red), 2 Weak (orange), 3 Fair (yellow), 4 Strong (lime), 5 Very Strong (green). Each card here scores a different sample password.

Sizes

size scales the radius, padding, type, and icons. md is the default; sm and xs are tighter for dense forms. This one trims the checklist down to two essentials.

Requirements

rules can be as rich or as bare as your policy needs. This example tracks five separate checks and ties the meter straight to the count of satisfied rules.

Empty State

Scoring an empty string gives the pristine state: strength is 0, so the meter is neutral and the label is hidden, with every rule unmet. This is what renders before the user types.

Meter Only

Omit rules to render just the strength bar without the checklist. Useful when space is tight or the requirements live elsewhere.

Accessibility

PasswordStrength is a passive status display. It is not focusable; focus belongs to the password input it sits beside.

ARIA notes:

• The component conveys meaning through color (meter and label tones). Keep the text label and rule descriptions so the state is readable without relying on color alone.
• Associate it with its input from the consumer side, for example aria-describedby on the password input pointing at the component, so assistive tech reads the requirements with the field.
• The rules checklist is plain text with icons; the icon state is mirrored by the data-met attribute and the visible label, not by an icon alone.

Styling

Tailwind override: the card has a fixed 350px width by default (it does not stretch to fill its container). Pass className to override it, for example w-full to match a wider input:

<PasswordStrength className="w-full" strength={4} rules={rules} />

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="password-strength" on the root, with data-size ("xs", "sm", "md").
• data-met on each rule row that is satisfied (absent when the rule is unmet).

Target a specific state in CSS:

[data-slot="password-strength"][data-size="sm"] {
  /* ... */
}

Related Components

• Progress: use this for a plain completion bar with no password semantics or checklist.
• Field: use this for inline validation messaging attached to a single input.
• Input Group: the password input this component pairs with, including the show/hide toggle.
• Inline Alert: use this for a form-level error callout rather than per-character feedback.

API Reference

PasswordStrength

Controlled strength meter with an optional rules checklist. Renders a <div> and extends React.ComponentProps<"div">, so standard div attributes (id, aria-*, etc.) are accepted.

Props

Variants