Blazor - Get Started with PasswordTextBox

Blazor - Get Started with Smart.PasswordTextBox

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic PasswordTextBox

Smart.PasswordTextBox is a password input element with additional built-in features such as reveal password and strength measuring.

The list of avaible options is set using the DataSource property.

  1. Add the PasswordTextBox component to the Pages/Index.razor file
  2. Optionally, set the Name, Placeholdeer properties.
    <PasswordTextBox Placeholder="Enter password" Name="password"></PasswordTextBox>
Basic password

PasswordTextBox Customization

Smart.PasswordTextBox can be styled in different ways by setting the Class property. The PasswordTextBox can be default, outlined or underlined

<PasswordTextBox Class="underlined"></PasswordTextBox>
PasswordTextBox modes

Reveal Password

Revealing password can help users check if they have made any mistakes while typing their passwords. It is enabled with the ShowPasswordIcon property.

<PasswordTextBox Class="underlined" ShowPasswordIcon></PasswordTextBox>
password reveal

Password Strength

By default, password strength is measured by the length of the password. The position of the message can be changed with TooltipPosition

<PasswordTextBox ShowPasswordStrength></PasswordTextBox>
password strength

In addition, it is possible to set a custom template and customize the look of the tooltip with the TooltipTemplate property.

<template id="tooltip-template">
  <span style="font-weight:bold; color:red">{{value}}</span>
<PasswordTextBox ShowPasswordStrength TooltipTemplate="@template"></PasswordTextBox>

@code {
  string template = "tooltip-template";
password strength template

Custom Password Strength

Smart.PasswordTextBox allows you to set custom function, which determines the strength of the password. To set the function, it is necessary to use JSInterop:

@inject IJSRuntime JS

Using JSInterop, inoke a custom JS function called "customStrength":

protected override void OnInitialized()

Inside the \_Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor), create a function that will attach a custom function to the customStrength property.

(function (global) {
  global.customStrength = function() {
            document.querySelector("smart-password-text-box").passwordStrength = function (password, allowedSymbols) {
                const passwordLength = password.length;
                if (passwordLength < 3) {
                    return 'short' ;
                } else if (passwordLength < 5) {
                    return 'weak';
                } else if(password.includes('!')){
                    return 'strong';
        }, 0)

Our custom function will consider a password "strong" only if it contains !

Custom password strength template

PasswordTextBox Events

Smart.PasswordTextBox provides multiple events that can help you expand the component's functionality.
Each event object has unique event.detail parameters.

  • OnChange - triggered when the value of the element is changed.
    Event Details: dynamic oldValue, dynamic value
  • OnChanging - triggered on each key up event of the PasswordTextBox, if the value is changed.
    Event Details: dynamic oldValue, dynamic value

The demo below uses the OnChanging Event to check whether the password contains the required @ symbol:

    <PasswordTextBox @ref="@field" Placeholder="Confirm password" Name="password" OnChanging="OnChanging" ShowPasswordIcon></PasswordTextBox>
    @code {
      PasswordTextBox field;
      string message = "";
      private async void OnChanging(Event ev){
        PasswordTextBoxChangingEventDetail detail = ev["Detail"];
          message = "Passwords must contain @";
          message = "Passwords is valid";
PasswordTextBox OnChanging event

Two-way Value Binding

The PasswordTextBox component also supports two-way value binding:

<PasswordTextBox @bind-Value = "@textValue"></PasswordTextBox>

    string textValue = "";
PasswordTextBox value binding