Components
Password strength
A tube of liquid that fills and changes colour as a password gets stronger — the level overshoots on a spring, its edge wobbles like a meniscus — with a checklist that ticks itself off. scorePassword() is exported too.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { PasswordStrength, scorePassword } from '@vizzele/react';
<PasswordStrength password={password} minLength={8} />
// Or just the numbers:
const { score, checks } = scorePassword(password); // score 0–4Props
| Prop | Type | Default | Description |
|---|---|---|---|
password | string | — | The text to rate. |
minLength | number | 8 | First rule. |
showChecks | boolean | true | List the rules. |
labels | [string × 5] | ['Too weak', 'Weak', 'Fair', 'Strong', 'Excellent'] | Words for scores 0–4 (translate them here). |
Accessibility
- The tube is a role="meter" with the strength as aria-valuetext.
- Each rule says "done" or "missing" to screen readers, not only with a tick.
- The colour is never the only signal: the level and the word change too.
- A quick estimate for feedback while typing — always validate on the server.