Blazor Password Input

The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type password.

Parameters

Name	Type	Default	Required	Description	Added Version
Disabled	bool	false		Gets or sets the disabled state.	3.3.0
ShowHidePasswordButtonCssClass	string	btn border-top border-end border-bottom border border-start-0		Gets or sets the show/hide password button CSS class.	3.3.0
Value	string	null	✔️	Gets or sets the value.	3.3.0

Methods

Name	Returns	Description	Added Version
Disable()	void	Disables checkbox input.	3.3.0
Enable()	void	Enables checkbox input.	3.3.0

Events

Name	Description	Added Version
ValueChanged	This event is fired when the PasswordInput value changes.	3.3.0

Examples

Basic Usage

<div class="mb-3">
    <PasswordInput @bind-Value="@enteredPassword" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>

@code {
    private string? enteredPassword = null;
}

See demo here

Disable

Use the Disabled parameter to disable the PasswordInput.

<div class="mb-3">
    <PasswordInput @bind-Value="@enteredPassword" Disabled="@disabled" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>

@code {
    private string? enteredPassword = null;

    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the PasswordInput.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <PasswordInput @ref="passwordInputRef" @bind-Value="@enteredPassword" />
</div>
<div class="mb-3">Entered text: @enteredPassword</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>

@code {
    private PasswordInput? passwordInputRef;

    private string? enteredPassword = null;

    private void Disable() => passwordInputRef.Disable();

    private void Enable() => passwordInputRef.Enable();
}

See demo here

Valdations

Like any other blazor input component, PasswordInput supports validations. Add the DataAnnotations on the PasswordInput component to validate the user input before submitting the form. In the below example, we used Required attribute.

@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">User name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TextInput @bind-Value="@userLogin.UserName" Placeholder="Enter user name" />
            <ValidationMessage For="@(() => userLogin.UserName)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Password: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <PasswordInput @bind-Value="@userLogin.Password" />
            <ValidationMessage For="@(() => userLogin.Password)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Login</Button>
        </div>
    </div>

</EditForm>

@code {
    private UserLogin userLogin = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(userLogin);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        // additional check
        if (editContext.Validate())
        {
            // do something
            // submit the form
            Console.WriteLine("Login successful");
        }
    }

    private void ResetForm()
    {
        userLogin = new();
        editContext = new EditContext(userLogin);
    }

    public class UserLogin
    {
        [Required(ErrorMessage = "User name required.")]
        public string? UserName { get; set; }

        [Required(ErrorMessage = "Password required.")]
        public string? Password { get; set; }
    }
}

See demo here

Events: ValueChanged

This event fires when the PasswordInput value changes, but not on every keystroke.

<div class="mb-3">
    <PasswordInput Value="@enteredPassword" ValueExpression="() => enteredPassword" ValueChanged="(value) => PasswordChanged(value)" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>

@code {
    private string? enteredPassword = null;

    private void PasswordChanged(string? value)
    {
        enteredPassword = value;

        // do something
    }
}

See demo here