Password Input
Password field with show/hide and a live strength meter.
Password Input is a sign-up password field with a show/hide toggle and a live strength meter. Segments fill as rules pass, each rule in the checklist ticks off with a small pop, and the strength level is announced politely, so people know what is missing before they submit.
Preview
- 8+ charactersnot met
- A numbernot met
- Upper and lower casenot met
- A symbolnot met
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/password-input.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/password-input.
Builds on: motion
Usage
import { PasswordInput } from "@/components/ui/password-input";
<PasswordInput name="password" placeholder="At least 8 characters" />Motion
Rules pop as they pass; segments transition color.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
PasswordInput
Extends native <input> props (type is managed).
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | boolean | true | Show meter and checklist. |
| rules | { label; test }[] | length, number, case, symbol | Your own rules. |
Accessibility
- The toggle is a pressed-state button with a clear label.
- Rule states are announced; autocomplete="new-password" helps password managers.
FAQ
Also searched as: password strength meter react · password input with eye icon · show hide password react · password validation checklist · shadcn password input