Added in v2.1

Blazorise PasswordStrength component

The PasswordStrength component combines a password input with configurable strength rules, a progress indicator, and localized guidance.

The default setup follows passphrase-first guidance: long passwords are prioritized, common or breached values are blocked, and character-composition rules remain optional.

To use the PasswordStrength component, install the Blazorise.Components package first.

Installation

PasswordStrength is part of the Blazorise.Components package and follows the same Blazorise licensing and copyright terms.

NuGet

Install extension from NuGet.

Install-Package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Security guidance

By default, PasswordStrength uses MinimumLength="15", checks blocked/common passwords, and does not force uppercase, lowercase, numeric, or symbol rules.

If your policy requires composition checks, enable the related parameters (RequireUppercase, RequireLowercase, RequireNumber, and RequireSpecialCharacter) and adjust MinimumLength as needed.

Examples

Basic

Start with the default passphrase-first configuration.

Strength

At least 15 characters

Not a common or breached password

Current score: 0%

<PasswordStrength @bind-Value="@password"
                  Placeholder="Use a long passphrase"
                  StrengthChanged="@OnStrengthChanged" />

<Div Margin="Margin.Is3.FromTop">
    <Span TextWeight="TextWeight.SemiBold">Current score:</Span> @score%
</Div>

@code {
    private string password;
    private int score;

    private void OnStrengthChanged( PasswordStrengthChangedEventArgs eventArgs )
    {
        score = eventArgs.Score;
    }
}

Custom policy

Configure a stricter policy with composition requirements and a custom blocked-password list.

Strength

At least 12 characters

One uppercase letter

One lowercase letter

One number

One special character

Not a common or breached password

<PasswordStrength @bind-Value="@password"
                  MinimumLength="12"
                  RequireUppercase
                  RequireLowercase
                  RequireNumber
                  RequireSpecialCharacter
                  RequireNotCompromisedPassword
                  BlockedPasswords="@blockedPasswords" />

@code {
    private static readonly string[] blockedPasswords =
    [
        "P@ssw0rd",
        "Password123!",
        "Welcome123!"
    ];

    private string password;
}

Validation

Use PasswordStrength inside Validation and Validations just like any other text input.

Password

Please enter a password that satisfies all active policy rules.

Strength

At least 12 characters

One uppercase letter

One lowercase letter

One number

One special character

Not a common or breached password

@using System
@using System.Linq

<Validations @ref="@validations" Mode="ValidationMode.Manual">
    <Validation Validator="@ValidatePasswordPolicy">
        <Field>
            <FieldLabel RequiredIndicator>Password</FieldLabel>
            <FieldBody>
                <PasswordStrength @bind-Value="@password"
                                  MinimumLength="12"
                                  RequireUppercase
                                  RequireLowercase
                                  RequireNumber
                                  RequireSpecialCharacter>
                    <Feedback>
                        <ValidationError>Please enter a password that satisfies all active policy rules.</ValidationError>
                    </Feedback>
                </PasswordStrength>
            </FieldBody>
        </Field>
    </Validation>

    <Button Color="Color.Primary" Clicked="@ValidateAll">
        Validate
    </Button>
</Validations>

@code {
    private Validations validations;
    private string password;

    private void ValidatePasswordPolicy( ValidatorEventArgs eventArgs )
    {
        string currentPassword = Convert.ToString( eventArgs.Value );

        if ( string.IsNullOrWhiteSpace( currentPassword ) )
        {
            eventArgs.Status = ValidationStatus.Error;
            return;
        }

        bool hasMinimumLength = currentPassword.Length >= 12;
        bool hasUppercase = currentPassword.Any( char.IsUpper );
        bool hasLowercase = currentPassword.Any( char.IsLower );
        bool hasNumber = currentPassword.Any( char.IsDigit );
        bool hasSpecialCharacter = currentPassword.Any( c => char.IsPunctuation( c ) || char.IsSymbol( c ) );

        bool isValid = hasMinimumLength
            && hasUppercase
            && hasLowercase
            && hasNumber
            && hasSpecialCharacter;

        eventArgs.Status = isValid
            ? ValidationStatus.Success
            : ValidationStatus.Error;
    }

    private Task ValidateAll()
    {
        return validations.ValidateAll();
    }
}

Custom localization

Override localized texts with the PasswordStrengthLocalizer parameter.

Strength

Use at least 10 characters

Include one number

Avoid common or breached passwords

@using System.Collections.Generic
@using System.Globalization

<PasswordStrength @bind-Value="@password"
                  MinimumLength="10"
                  RequireNumber
                  PasswordStrengthLocalizer="@Localize" />

@code {
    private static readonly Dictionary<string, string> customLocalization = new()
    {
        ["Enter password"] = "Enter your password",
        ["Strength"] = "Strength",
        ["Strong"] = "Excellent",
        ["Good"] = "Good",
        ["Fair"] = "Average",
        ["Weak"] = "Weak",
        ["Show password"] = "Show password",
        ["Hide password"] = "Hide password",
        ["At least {0} characters"] = "Use at least {0} characters",
        ["One number"] = "Include one number",
        ["Not a common or breached password"] = "Avoid common or breached passwords",
    };

    private string password;

    private string Localize( string name, params object[] arguments )
    {
        string template = customLocalization.TryGetValue( name, out string localizedText )
            ? localizedText
            : name;

        return arguments?.Length > 0
            ? string.Format( CultureInfo.CurrentCulture, template, arguments )
            : template;
    }
}

License and copyright

For full licensing details, see the Blazorise License page.

API

Parameters

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Gets or sets the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Gets or sets the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`BlockedPasswords`	Gets or sets additional blocked passwords used during validation.	`IEnumerable<string>`	`null`
`ChildContent`	Specifies the content to be rendered inside this PasswordStrength.	`RenderFragment`	`null`
`Color`	Sets the input text color.	`Color`	`Color.Default`
`Debounce`	If true, the entered value will be updated after a delay.	`bool?`	`null`
`DebounceInterval`	Interval in milliseconds used to debounce the text update.	`int?`	`300`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Immediate`	If true, the entered value will be updated after each key press.	`bool?`	`true`
`InputAttributes`	Captures all the custom attributes that should be forwarded to the internal password input element.	`Dictionary<string, object>`	`null`
`Intent`	Sets the input text intent.	`Intent`	`null`
`MinimumLength`	The minimum required password length. Defaults to 15 to align with current security recommendations for single-factor passwords.	`int`	`15`
`PasswordStrengthClasses`	Custom CSS class names for PasswordStrength component elements.	`PasswordStrengthClasses`	`null`
`PasswordStrengthLocalizer`	Function used to handle custom localization that will override a default ITextLocalizer.	`TextLocalizerHandler`	`null`
`PasswordStrengthStyles`	Custom inline styles for PasswordStrength component elements.	`PasswordStrengthStyles`	`null`
`Pattern`	The pattern attribute specifies a regular expression that the input element's value is checked against on form validation.	`string`
`Placeholder`	Sets the placeholder for the empty text.	`string`
`Plaintext`	Sets the class to remove the default form field styling and preserve the correct margin and padding.	`bool`	`false`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`RequireLowercase`	If true, requires at least one lowercase character. Disabled by default to follow modern guidance that favors longer passphrases over strict composition rules.	`bool`	`false`
`RequireNotCompromisedPassword`	If true, validates the value against blocked passwords.	`bool`	`true`
`RequireNumber`	If true, requires at least one digit. Disabled by default to follow modern guidance that favors longer passphrases over strict composition rules.	`bool`	`false`
`RequireSpecialCharacter`	If true, requires at least one symbol or punctuation character. Disabled by default to follow modern guidance that favors longer passphrases over strict composition rules.	`bool`	`false`
`RequireUppercase`	If true, requires at least one uppercase character. Disabled by default to follow modern guidance that favors longer passphrases over strict composition rules.	`bool`	`false`
`RuleSatisfiedColor`	Gets or sets the color used for satisfied password rules.	`TextColor`	`Success`
`RuleUnsatisfiedColor`	Gets or sets the color used for unsatisfied password rules.	`TextColor`	`Default`
`ShowPasswordButtonColor`	Gets or sets the color for the password visibility toggle button.	`Color`	`Light`
`ShowPasswordToggle`	Gets or sets whether to show a toggle button for password visibility.	`bool`	`true`
`ShowRules`	Gets or sets whether to display the checklist of active rules.	`bool`	`true`
`ShowStrength`	Gets or sets whether to display password strength details.	`bool`	`true`
`Size`	Sets the size of the input control.	`Size?`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`UseDefaultBlockedPasswordList`	If true, includes a small default list of commonly compromised passwords in blocked checks.	`bool`	`true`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Events

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`StrengthChanged`	Occurs after strength evaluation has changed.	`EventCallback<PasswordStrengthChangedEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Methods

Method	Description	Return	Parameters
`Select`	Select all text in the underline component.	`Task`	`bool focus`
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`

Blazorise PasswordStrength component

Installation

NuGet

Imports

Security guidance

Examples

Basic

Custom policy

Validation

Custom localization

License and copyright

API

Parameters

Events

Methods

On this page