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.
1import { PasswordValidation } from '@/craft/components/password-validation';2import { Input } from '@/components/ui/input';3import { Label } from '@/components/ui/label';4import { useState } from 'react';56function MyForm() {7const [password, setPassword] = useState('');89 return (10 <div>11 <Label htmlFor='password'>Password</Label>12 <Input13 id='password'14 type='password'15 value={password}16 onChange={(e) => setPassword(e.target.value)}17 />18 <PasswordValidation password={password} />19 </div>20 );2122}
| 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.