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:

    Current Value: (empty)
    Length: 0 characters

    2. Custom Configuration

    Password meter with custom requirements and settings.

    Must be at least 12 characters with mixed case, numbers, and special characters

    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.

            Password Requirements:


              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:

                    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