We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Toggle icon

Is there really no built-in way to toggle a textbox icon? 

This seems like a very basic feature. Password textboxes are a prime example. You have an eye open icon and an eye closed icon and you click it to toggle showing the password as text or asterisks.

I did find a forum answer on how to do it with javascript, but I highly recommend you make it a standard feature.

Seems to me you'd just have something like AddIconAsync, which appends an icon class, but UpdateIconAsync to change it, instead.

3 Replies

UD UdhayaKumar Duraisamy Syncfusion Team March 22, 2023 04:07 PM UTC

We understand that you are looking for a way to add icons and toggle the visibility of characters in a textbox component. You can use the addIcon
method in the created event of the textbox component to add icons to the textbox. Additionally, to switch between visible and hidden characters, you may change the type from "text" to "password" and vice versa. To toggle the eye icon type, you can use the remove method as demonstrated in the code snippet below.

To better assist you, we have also prepared a sample and shared it below for your reference.

[ Code Snippet ]

var textareaObj = new ej.inputs.TextBox({

  placeholder: 'Enter your Password',

  floatLabelType: 'Auto',

  created: onCreated,




function onCreated() {

  textareaObj.addIcon('append''e-icons password e-eye-slash');

  var el = document.querySelector('.e-icons.password');

  el.addEventListener('click'function () {

    if (textareaObj.type == 'text') {

      textareaObj.type = 'password';


    } else {

      textareaObj.type = 'text';






KA Keith A Price March 22, 2023 06:15 PM UTC

Is this a Blazor sfTextBox example? It looks like maybe javascript?

If it is Blazor, can you give an example of the razor markup?

And if it's not, can you give me a Blazor example?

UD UdhayaKumar Duraisamy Syncfusion Team March 23, 2023 02:10 PM UTC

You can use the below code to dynamically change the visibility of password in Syncfusion blazor TextBox component. Please refer to the below shared code snippet and sample for more information.


@page "/"


@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime


<div class="row" style="margin:130px auto;width:300px">

    <SfTextBox ID="passowrdBox" @ref="TextBoxSearchObj" Type=InputType.Password Placeholder="Upload Picture" Created="@onCreateUpload"></SfTextBox>


@code {

              SfTextBox TextBoxSearchObj;

              public bool Isbool = true;


              public async Task onCreateUpload()


                             var OnClick = EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick);

                             await TextBoxSearchObj.AddIcon("prepend", "fa fa-eye", new Dictionary<string, object>() { { "onclick", OnClick } });



              public async Task PasswordClick()




                                           await JSRuntime.InvokeAsync<object>("visible");

                                           Isbool = false;




                                           await JSRuntime.InvokeAsync<object>("hide");

                                           Isbool = true;





function hide()


            document.getElementById('passowrdBox').type = "password";

            document.querySelector('.e-input-group-icon').classList.replace('fa-eye-slash', 'fa-eye');


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toggle_Password_TextBox_Blazor932283140

Live Chat Icon For mobile
Up arrow icon