PasswordStrength

A new-password field with a four-step meter, a live rule checklist and a strength word that updates as you type.

When to use

• Sign-up, reset and change-password flows where people choose a new password, such as creating a CapyDB or notdocs account.
• Gating a submit button on a minimum strength via onValueChange.
• Not for signing in with an existing password; use PasswordField.
• Not for one-time codes; use OtpInput.

Usage

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

const [level, setLevel] = useState(0);
h(PasswordStrength, {
  label: "New password",
  name: "password",
  autoComplete: "new-password",
  onValueChange: (value, strength) => setLevel(strength.level),
});
// h(Button, { disabled: level < 3 }, 'Create account')

Props

Prop	Type	Default	Description
label	string	required	Visible label tied to the input.
value / defaultValue	string	– / ""	Controlled or initial password.
onValueChange	(value, strength) => void	–	Called on every change with { level: 0–4, label, met, short? }.
rules	PasswordRule[]	built-in rules	{ id, label, test, remaining? }. Strength is the share of rules met over four steps.
error	string	–	Error copy; sets aria-invalid and shakes once per new error.
revealed / onRevealedChange	boolean / (revealed) => void	–	Controlled show/hide state.
messages	PasswordStrengthMessagesInput	English	Replacement copy for levels, labels and the summary. Pass only what changes.
shortLength	number	8	Below this the meter holds at step one and reads "Too short".
countCharacters	(password) => number	code points	How shortLength counts characters.
...input props	InputHTMLAttributes	–	Forwarded to the input (name, autoComplete, ref, onChange).

Notes

• The meter exposes a 0–4 value and a text label; the rules list and any error are linked to the input. A live status region announces strength and rules met. The reveal button reports its pressed state.
• Reduced motion (checked after hydration) removes the shake, segment wave and rolling counters.
• The meter tone follows the level: red (too short, weak), orange (fair), green (good, strong). The field uses the theme's surface, line-strong and rounded-control, and its reveal button rounded-button; className goes to the input.