Password Strength
Pro
A password field with a show toggle, a segmented meter that fills and recolors, and rules that tick as they pass.
Customize
8
Checklist
Require a symbol
Installation
Password Strength is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy password-strength.tsx into components/ui and run npm install motion.
Usage
import { PasswordStrength } from "@/components/ui/password-strength";
<PasswordStrength
name="password"
onStrengthChange={(passed, total) => setCanSubmit(passed === total)}
/>Props
14 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled value. Leave it out to let the field manage itself. |
| defaultValue | string | "" | Starting value when uncontrolled. |
| onChange | (value: string) => void | — | Called with the new password on every edit. |
| onStrengthChange | (passed: number, total: number) => void | — | Called with how many rules pass, handy for enabling a submit button. |
| rules | { label: string; test: (value: string) => boolean }[] | DEFAULT_PASSWORD_RULES | One meter segment and one checklist line per rule. Defaults cover length, case, numbers and symbols. |
| showChecklist | boolean | true | Shows the list of rules under the meter. |
| label | string | "Password" | Visible label. |
| placeholder | string | — | Native placeholder. |
| autoComplete | string | "new-password" | Native autocomplete hint. |
| required | boolean | — | Native required attribute. |
| disabled | boolean | false | Blocks input. |
| name | string | — | Form field name. |
| id | string | — | Id of the input. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion