Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA new-password field with a live checklist of each rule (length, number, symbol, not the email), a confirm field that checks the match, and a show toggle. Use this when you require a password policy and want people to see what is missing instead of failing at submit.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
You enforce a password policy and want it visible while typing, so the first submit works.
Do not use it when: Do not use it to judge password strength; a rule checklist is not a strength estimate. Prefer a long passphrase hint and a breached-password check on the server.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Description |
|---|---|---|
email | string | Adds the rule "does not contain your email name". |
onSubmit | (password) => void | Promise<void> | Called after the rules and the confirmation pass. |
Edit the exported RULES array to change the policy; validation reads from the same list.
aria-describedby; each rule has text ("met" or "not met yet") in addition to the check or dash icon, so the status is not only visual.aria-pressed and a name that says the next action; it reveals both fields together.new-password lets password managers fill both fields.The pattern ships with a Testing Library test (password-with-rules-checklist.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.