Password Meter Component Demo
A comprehensive password strength meter with real-time validation, visual feedback, and accessibility support.
1. Basic Usage
Simple password meter with default configuration.
Password Requirements:
Length: 0 characters
2. Custom Configuration
Password meter with custom requirements and settings.
Password Requirements:
Configuration:
- Minimum Length: 12 characters
- Requires: Uppercase, Lowercase, Digit, Special Character
- Minimum Unique Characters: 8
- Display Mode: Progress Bar
3. Without Password Toggle
Password field without show/hide functionality.
Password Requirements:
4. Meter Only
Displays strength meter without requirement checklist.
5. Event Callbacks
Monitor password strength changes with event callbacks.
Password Requirements:
Event Log:
6. Display Modes
Toggle between different visual representations.
Password Requirements:
7. Form Integration
Using PasswordMeter in an EditForm with validation.
8. Pattern Detection (Phase 2) 🆕
Detects 5 types of weak patterns: sequential chars, repetition, keyboard patterns, leet speak, and dates.
Password Requirements:
Try These Examples:
Config: DetectPatterns = true
9. Common Password Detection (Phase 2) 🆕
Checks against 500+ common passwords with leet-speak normalization.
Password Requirements:
Try Common Passwords:
Penalty: -50% score for common passwords
10. All Advanced Features (Phase 2) 🆕
Pattern detection + Common password check + Logarithmic scoring.
Password Requirements:
🆕 Phase 2 Features
5
Pattern Types
Sequential, Repeated, Keyboard, Leet Speak, Dates
500+
Common Passwords
With leet-speak normalization
3
Scoring Curves
Linear, Logarithmic, Step-based
🔗 Explore More:
- Password Generator - Generate secure passwords
- Pattern Detection - Deep dive into pattern detection
- Advanced Features - Scoring curves & security checks
Features
✅ Real-time Validation
Instant feedback as users type
✅ Visual Strength Meter
Multiple display modes available
✅ Accessibility
ARIA attributes and screen reader support
✅ Customizable Requirements
Configure min length, character types, etc.
✅ Event Callbacks
Hook into strength changes and validation
✅ Form Integration
Works seamlessly with EditForm