Loading craft...
Loading craft...
An animated password validation component that provides real-time feedback on password strength with customizable validation rules. Built with Framer Motion for smooth animations and fully accessible with ARIA support.
I saw a post by @nickbakeddesign with a design concept for password validation using badges instead of error messages. This felt much better than traditional error lines that appear after form submission.
I implemented it with Motion for smooth interactions. Each badge animates in with a staggered delay, and the icons have a subtle zoom animation for immediate feedback.
The component automatically hides when all validations pass (unless you set alwaysShow to true), keeping the UI clean.
| Props | Description | Default |
|---|---|---|
password | The password string to validate | - |
rules | Array of custom validation rules. Each rule has a label and validator function | defaultPasswordRules |
error | Error object with optional message property (compatible with React Hook Form's FieldError) | - |
className | Additional CSS classes | - |
alwaysShow | Show validation even when all rules pass | false |
Design concept by @nickbakeddesign. Implementation inspired by shadcn/ui animation patterns.