How to Build a Show Password Toggle - Web

David Taing

10/8/2022

Show Password Button - Screenshot from Stripe.com.

Have you ever wondered how a “Show Password” toggle works? I didn’t know how it worked a few days ago, but now it seems so obvious. 🤣

Here’s my beginner tip.

To show the password, you’ll need to render the Input element as a normal Text Input. To hide the password, change the element back to a Password Input. So all you have to do is toggle between type="text" and type="password".

Code Example in React


Written By David Taing

Dave is an ex-Property Manager turned Fullstack TypeScript Engineer. He mostly spends his time gluing APIs together at work, building side-projects, regularly going to tech meetups, and sharing the things he learns online.