Password Strength Meter
A customizable password strength meter component that provides real-time visual feedback on password security.
Usage
- At least 8 characters
- At least one lowercase letter
- At least one uppercase letter
- At least one number
- At least one special character
import { PasswordStrengthMeter } from "@/components/strength-meter"
export default function MyComponent() {
return (
<PasswordStrengthMeter
placeholder="Type your password"
className="max-w-md"
/>
)
}Installation
Install the Password Strength Meter component using your preferred package manager.
npx shadcn@latest add https://rigidui.com/r/strength-meter.jsonFeatures
The Password Strength Meter component is packed with powerful features designed to provide an exceptional user experience.
Visual Strength Indicator
Provides visual feedback on password strength with colored segments.
Customizable Segments
Adjust the number and appearance of the strength meter segments.
Password Requirements
Shows a checklist of requirements that help users create stronger passwords.
Password Visibility Toggle
Allows users to show or hide their password with a toggle button.
Animated Feedback
Provides animated visual feedback as the user types their password.
Auto Password Generation
Generate strong, secure passwords automatically with customizable length and complexity.
Props
| Prop | Type | Default |
|---|---|---|
value? | string | '' |
onValueChange? | function | undefined |
showText? | boolean | true |
showRequirements? | boolean | true |
segments? | number | 4 |
strengthThresholds? | Record<StrengthLevel, number> | { empty: 0, weak: 1, fair: 40, good: 70, strong: 90 } |
requirements? | PasswordStrengthRequirement[] | defaultRequirements |
customCalculateStrength? | (password: string) => number | undefined |
showPasswordToggle? | boolean | true |
strengthLabels? | Record<StrengthLevel, string> | { empty: "Empty", weak: "Weak", fair: "Fair", good: "Good", strong: "Strong" } |
meterClassName? | string | '' |
inputClassName? | string | '' |
placeholder? | string | 'Enter password' |
animated? | boolean | true |
enableAutoGenerate? | boolean | false |
autoGenerateLength? | number | 10 |
Advanced Examples
Explore different configurations and use cases for the Password Strength Meter component.
Basic Password Strength Meter
Simple password strength meter with default settings. Perfect for most use cases with standard security requirements.
- At least 8 characters
- At least one lowercase letter
- At least one uppercase letter
- At least one number
- At least one special character
import { PasswordStrengthMeter } from "@/components/password-strength-meter"
export default function BasicExample() {
return (
<PasswordStrengthMeter
placeholder="Enter your password"
className="max-w-md"
/>
)
}With Auto Password Generation
Enable automatic password generation to help users create strong passwords with a single click.
- At least 8 characters
- At least one lowercase letter
- At least one uppercase letter
- At least one number
- At least one special character
import { PasswordStrengthMeter } from "@/components/password-strength-meter"
export default function AutoGenerateExample() {
return (
<PasswordStrengthMeter
placeholder="Generate or type password"
enableAutoGenerate={true}
autoGenerateLength={16}
className="max-w-md"
/>
)
}With Form Integration
Integrate with form state management to handle password changes and validation, including auto-generation.
- At least 8 characters
- At least one lowercase letter
- At least one uppercase letter
- At least one number
- At least one special character
import { PasswordStrengthMeter } from "@/components/password-strength-meter"
import { useState } from "react"
import { Button } from "@/components/ui/button"
export default function FormIntegrationExample() {
const [password, setPassword] = useState("")
const [isValid, setIsValid] = useState(false)
const handlePasswordChange = (newPassword) => {
setPassword(newPassword)
setIsValid(newPassword.length >= 8 && /[A-Z]/.test(newPassword))
}
const handleSubmit = () => {
if (isValid) {
console.log('Form submitted with password:', password)
}
}
return (
<div className="space-y-4">
<PasswordStrengthMeter
placeholder="Enter password for registration"
value={password}
onChange={handlePasswordChange}
enableAutoGenerate={true}
className="max-w-md"
/>
<Button
onClick={handleSubmit}
disabled={!isValid}
className="w-full max-w-md"
>
Create Account
</Button>
{password && (
<p className="text-sm text-muted-foreground max-w-md">
Password {isValid ? 'meets' : 'does not meet'} requirements
</p>
)}
</div>
)
}