Password Strength

A live strength meter for password fields: a segmented bar that climbs red to green, a one-word verdict and an optional requirements checklist. It scores the value against a rule set you control.

Password strength

Fair

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add password-strength

Usage#

Hold the password in state and hand the same value to both the PasswordInput and PasswordStrength. The root scores the value against its rule set and exposes the result to the parts through context - compose PasswordStrengthMeter, PasswordStrengthLabel, and PasswordStrengthList in any arrangement.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Anatomy#

import {
  PasswordStrength,
  PasswordStrengthMeter,
  PasswordStrengthLabel,
  PasswordStrengthList,
} from "@/components/ui/password-strength"

<PasswordStrength value={…}>
  <PasswordStrengthMeter />
  <PasswordStrengthLabel />
  <PasswordStrengthList />
</PasswordStrength>

With requirements#

Add PasswordStrengthList to spell out the policy. The moment the password satisfies a requirement, its dot lifts up and out while the check rises from below into place, so a rule being met reads as progress rather than a blink, and the user always knows what is left.

At least 8 characters (not met)
Upper & lowercase letters (not met)
At least one number (not met)
At least one symbol (not met)

Inside a Field#

It composes straight into a Field, sitting where the hint would - the label and input keep their auto-wiring while the meter reports on the value below them.

Password

Custom policy#

Pass rules to replace the default policy. Each rule is an { id, label, test } - the meter normalises however many you supply onto its four segments, and the list renders one row per rule.

At least 12 characters (not met)
Upper & lowercase letters (not met)
At least one number (not met)
At least one symbol (!@#$…) (not met)
No spaces (not met)

API reference#

PasswordStrength

The root: scores value against its rules on every render and shares the result with the parts. Forwards native <div> props. Every part accepts className, merged last.

Prop	Type	Default	Description
value*	string	-	The current password; hand it the same state as the input.
rules	PasswordRule[]	defaultPasswordRules	The policy, as `{ id, label, test }`. The default asks for 8 characters, mixed case, a number and a symbol.

Data attribute	Description
data-level	`0` with nothing typed, then `1` to `4`: Weak, Fair, Good, Strong.

PasswordStrengthMeter

Four segments climbing red to green, role="meter"; any number of rules maps onto the four. Forwards native <div> props.

Data attribute	Description
data-filled	On each lit segment.

PasswordStrengthLabel

The verdict (Weak, Fair, Good, Strong) in its tone, aria-live="polite". Forwards native <p> props.

Prop	Type	Default	Description
placeholder	string	-	Shown before anything is typed.

PasswordStrengthList

One row per rule; a met rule's dot rolls out as its check rolls in. Forwards native <ul> props.

Data attribute	Description
data-met	On each row whose rule is met.

getPasswordStrength

getPasswordStrength(value, rules?) scores without rendering, returning { score, max, level, label, tone, rules }. defaultPasswordRules is exported too.

FAQ#

Scoring is kept a separate concern so the meter drops in below any `PasswordInput` without coupling. You hold the password in state and hand the same value to both the input and `PasswordStrength`.