Password Field show/hide Toggle in Vanilla JavaScript


1 min read

Password field show/hide toggle is a common user experience pattern. In this pattern, you want your user to enter a password once (when they sign up). You want her to see what she typed using the eye button.

Here I implemented a basic password show/hide toggle button using vanilla JavaScript:

I added a button for the eye icon. Used the free font-awesome service to render an open-eye icon ๐Ÿ‘

To toggle the password from visible to hidden, the trick is to change the input type from "password" to "text" field.

passwordField.setAttribute("type", "text")

I did this by calling the setAttribute() method on the password field. You can take a look at my basic implementation here on my GitHub:

Similarly, when a user toggles between show/hide button, the eye icon changes to the slashed eye version ๐Ÿ˜„

if (currentType === "password") {
    passwordField.setAttribute("type", "text");
    showText.textContent = "HIDE";

You can check out web_dev/patterns to learn many more user experience patterns like this one.

If you found this post insightful, make sure to leave a comment and let me know your thoughts.