New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Show and Hide Passwords in a TextBox


Product Telerik UI for ASP.NET MVC TextBox
Progress Telerik UI for ASP.NET MVC version Created with the 2022.2.621 version


How can I toggle sensitive data, such as passwords, so that the user can preview the entered input?


  1. Add a button or a span element and handle the click event for it.
  2. In the event handler, change the type attribute of the TextBox to text or password so that the text is displayed or obscured.
        .HtmlAttributes(new { type = "password" })
    <span toggle="textbox" class="k-icon k-i-eye toggle-password"></span>
            $(".toggle-password").click(function () {
                $(this).toggleClass("k-i-minus k-i-eye"); //toggle the current icon
                var input = $("[id='" + $(this).attr("toggle") + "']"); //get the input

                if (input.attr("type") === "password") { //change the input type
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET MVC TextBox Resources

See Also

In this article