Implementing a Password Input with Show/Hide Icon Button in KendoReact

Environment

Product Version	9.0.0
Product	Progress® KendoReact TextBox

Description

I want to create a login form using KendoReact. For the password input, I need to include a button to toggle the visibility of the password, using an eye icon. This KB article also answers the following questions:

• How can I add a show/hide button to a password field in KendoReact?
• Is it possible to toggle password visibility in a KendoReact TextBox?
• How to use adornments in a KendoReact TextBox for password visibility?

Solution

To implement a password input with a toggle button for showing or hiding the password in KendoReact, follow these steps:

1. Add a KendoReact TextBox component to your application.
2. Manage the type property of the TextBox as a state variable ('password' or 'text').
3. Utilize the suffix adornment feature to include a toggle button within the TextBox. Refer to the official adornments documentation for more details.
4. Implement an onClick handler for the toggle button that switches the type state between 'password' and 'text', effectively showing or hiding the password.

Here's an example code snippet demonstrating the solution:

Change Theme

Theme

Loading ...

See Also

• KendoReact TextBox Overview
• TextBox Adornments in KendoReact