KQ-493 · STRENGTH/FIELD

Strength Field

A password field that shows its work. Four segments fill on snap as rules are met, staggered by cascade() so a pasted passphrase fills the bar left to right rather than flashing whole, and the bar steps danger → warn → success on a colour tween because a grade is not a landing. Each rule keeps a chip that fills as it is satisfied, with a tick drawing inside it on flick and un-drawing on a tween when the rule breaks; the reveal toggle is a real pressed button that strikes its eye on snap, and the rules travel as data so a product can bring its own.

KQ-493 · STRENGTH/FIELD

Fernworks account — every rule checks itself off as it is satisfied.

Choose a password

StrengthEmpty

8+ characters
A number
A symbol
Upper and lower case

Strength 0 of 4 · 0 rules met

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/strength-field

Props

value / defaultValue: string; default —; The password — controlled or initial.
onValueChange: (value: string) => void; default —; Fires on typing.
onStrengthChange: (strength: number, met: number) => void; default —; Fires with the 0–4 strength and how many rules are met, so a form can gate on it.
rules: { id: string; label: string; test: (value: string) => boolean }[]; default —; The requirements, as data. Defaults to 8+ characters, a number, a symbol, and upper and lower case.
label: string; default —; Visible label above the box.
showReveal: boolean; default true; Renders the reveal toggle inside the box.

Prop	Type	Default	Description
value / defaultValue	string	—	The password — controlled or initial.
onValueChange	(value: string) => void	—	Fires on typing.
onStrengthChange	(strength: number, met: number) => void	—	Fires with the 0–4 strength and how many rules are met, so a form can gate on it.
rules	{ id: string; label: string; test: (value: string) => boolean }[]	—	The requirements, as data. Defaults to 8+ characters, a number, a symbol, and upper and lower case.
label	string	—	Visible label above the box.
showReveal	boolean	true	Renders the reveal toggle inside the box.