Password Validation

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.

Craft Story

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.

How to Use

1import { PasswordValidation } from '@/craft/components/password-validation';
2import { Input } from '@/components/ui/input';
3import { Label } from '@/components/ui/label';
4import { useState } from 'react';
5
6function MyForm() {
7const [password, setPassword] = useState('');
8
9  return (
10  	<div>
11  		<Label htmlFor='password'>Password</Label>
12  		<Input
13  			id='password'
14  			type='password'
15  			value={password}
16  			onChange={(e) => setPassword(e.target.value)}
17  		/>
18  		<PasswordValidation password={password} />
19  	</div>
20  );
21
22}

Props

Attribution

Design concept by @nickbakeddesign. Implementation inspired by shadcn/ui animation patterns.