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: https://github.com/tamalchowdhury/chilspaceSignUp

Similarly, when a user toggles between show/hide button, the eye icon changes to the slashed eye version 😄

eyeIcon.classList.remove("fa-eye-slash");
eyeIcon.classList.add("fa-eye");

if (currentType === "password") {
    passwordField.setAttribute("type", "text");
    showText.textContent = "HIDE";
    eyeIcon.classList.remove("fa-eye-slash");
    eyeIcon.classList.add("fa-eye");
  }

You can check out web_dev/patterns to learn many more user experience patterns like this one. https://web.dev/articles/sign-in-form-best-practices#password-display

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