Add Eye Icon to Reveal a TextBox Password

Environment

Product

TextBox for Blazor

Description

This KB answers the following questions:

• How to add an eye icon to a text input and click the icon to show and hide the entered password?
• How to implement a button that reveals the password in a Telerik TextBox on click?
• How to make an eye toggle appear in a password textbox no matter if the textbox is focused or not?
• How to use mouseup and mousedown events on the TelerikSvgIcon control to toggle a password field?

Solution

1. Add a Button or a ToggleButton with the desired icon next to the TextBox or inside the TextBox SuffixTemplate.
2. Use the Button's OnClick event handler to toggle the TextBox Password parameter value.
3. (optional) Instead of Button OnClick, use @onmousedown and @onmouseup Blazor events on a generic HTML element to toggle the TextBox Password parameter. This approach allows using events with Telerik components that do not expose them, for example, a Telerik SVG icon or a font icon.
4. To use the TextBox with a reveal button inside a Telerik Form, use a FormItem Template.

Add an eye icon to reveal a password

<p>Reveal password on Telerik Button OnClick</p>

<TelerikTextBox @bind-Value="@TextBoxValue1" Password="@TextBoxPassword1" Width="200px">
    <TextBoxSuffixTemplate>
        <TelerikToggleButton Icon="@( TextBoxPassword1 ? SvgIcon.Eye : SvgIcon.EyeSlash )"
                             OnClick="@( () => TextBoxPassword1 = !TextBoxPassword1 )"
                             Selected="@( !TextBoxPassword1 )" />
    </TextBoxSuffixTemplate>
</TelerikTextBox>

<p>Reveal password on HTML element @@onmousedown</p>

<TelerikTextBox @bind-Value="@TextBoxValue2" Password="@TextBoxPassword2" Width="200px">
    <TextBoxSuffixTemplate>
        <span @onmousedown="@( () => TextBoxPassword2 = false )"
              @onmouseup="@( () => TextBoxPassword2 = true )">
            <TelerikButton Icon="@SvgIcon.Eye" ButtonType="@ButtonType.Button" />
        </span>
    </TextBoxSuffixTemplate>
</TelerikTextBox>

<style>
    /* Hide native browser eye icon in Edge if enabled */
    input.k-input-inner[type="password"]::-ms-reveal,
    input.k-input-innerinput[type="password"]::-ms-clear {
        display: none;
    }
</style>

@code {
    private string TextBoxValue1 { get; set; } = "abcde1";
    private bool TextBoxPassword1 { get; set; } = true;

    private string TextBoxValue2 { get; set; } = "zyxwv2";
    private bool TextBoxPassword2 { get; set; } = true;
}

See Also

• Input Adornments
• Form Item Templates