Password Strength

A password field with a show and hide toggle, a segmented strength meter and a checklist of rules.

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/password-strength.json

Usage

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

<PasswordStrength value={password} onValueChange={setPassword} />
 
<PasswordInput autoComplete="current-password" />

passwordStrength() gives a score from 0 to 4: one point each for 8 or more characters, 12 or more, mixed case, and a number plus a symbol. Scores of 0 and 1 are red, 2 is amber and 3 or more uses the primary color. It is exported, so a Meter elsewhere can share the same scoring.

Rules

The checklist runs each rule against the password and swaps the circle for a bold check once it passes. The length rule defaults to 8 characters; set minLength to change it, for example <PasswordStrength minLength={12} />. Pass your own rules to replace the list, and use passwordRules(12).every((r) => r.test(value)) to block a form until they all pass.

Props

PasswordStrength. value, defaultValue and onValueChange. minLength (default 8) sets the length rule and the scoring. rules, showMeter, showRules and meterLabel shape what sits under the field, and rulesClassName lays out the checklist. Everything else goes to the input.
PasswordInput. Any input prop, plus onValueChange, invalid and icon for the leading icon. The eye toggle swaps with the shared icon swap.
PasswordRules. password and rules, for a checklist on its own.

Pagination Phone Input

On This Page

Installation Usage Scoring Rules Props