How to toggle password visibility in JavaScript

By implementing a password visibility toggle, we can provide users with the option to display or hide the characters they have typed in the password field. By default, password fields in web forms hide the characters that users input. This is done to prevent prying eyes from easily deciphering passwords. However, it can sometimes be frustrating for users who want to double-check their input or ensure they have typed their password correctly.

Here are the steps to toggle password visibility using JavaScript.

HTML structure

We will start by creating an HTML structure with an input field for the password and a checkbox or button to toggle visibility. For example:

<body>
  <input type="password" placeholder="Password" id="passwordInput">
  <br />
  <input type="checkbox" id="toggleVisibility">
  <label for="toggleVisibility">Show Password</label>
</body>

The HTML structure consists of:

  • The <input type="password"> tag that creates an input field for users to enter their password. The type attribute is set to password to mask the input characters. The placeholder attribute provides a visual hint to users, displaying the text “Password” inside the field.

  • The <br /> tag is a self-closing tag that creates a line break, that separates the password input field from the checkbox and label that follow.

  • The <input type="checkbox"> tag that creates a checkbox element. The type attribute is set to checkbox to indicate that it’s a checkbox input field.

  • The <label> tag that represents a label associated with the checkbox. The for attribute with the value toggleVisibility connects the label to the corresponding checkbox.

JavaScript code

Next, we will write the JavaScript code to handle the toggle functionality. We can use the DOMDocument Object Model API to manipulate the HTML elements.

We have to add an event listener to the checkbox or button to detect changes in its state. When the checkbox is checked, change the password field’s type attribute to text to display the text. Otherwise, set it back to password to hide them. Here’s an example:

const passwordInput = document.getElementById("passwordInput");
const toggleVisibility = document.getElementById("toggleVisibility");
toggleVisibility.addEventListener("change", function() {
  if (toggleVisibility.checked) {
    passwordInput.type = "text";
  } else {
    passwordInput.type = "password";
  }
});

In the code above, we assigned the password input field and checkbox element to the variables, passwordInput and toggleVisibility respectively, using getElementById.

An event listener is added to the toggleVisibility checkbox using addEventListener, and when the checkbox's state changes, the associated function is triggered. If the checkbox is checked (toggleVisibility.checked is true), the type attribute of the passwordInput element is set to text to make the password characters visible. Otherwise, if the checkbox is unchecked, the type attribute is set back to password.

Styling (optional)

To enhance the user experience, we can also add styling to make it more visually appealing. Here's an example of CSS code that you can add to your <style> tag or CSS file.

input[type="password"],
input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="checkbox"] {
  margin-left: 5px;
}
label[for="toggleVisibility"] {
  color: #777;
  cursor: pointer;
}

In the code above, we have added three rules.

  • Lines 1–6: The first rule targets password and text input fields, making them visually consistent. It adds padding of 10px, creates a 1px solid border with a color of #ccclight gray, and gives the input fields a subtle rounded corner effect with a border-radius of 4px.

  • Lines 8–10: The second rule focuses on checkbox, applying a left margin of 5 pixels. This small margin creates a slight spacing between the checkbox and adjacent elements, contributing to a more visually pleasing layout.

  • Lines 12–15: The third rule targets the label associated with the toggleVisibility checkbox. It sets the text color to #777shade of gray for a softer appearance. Additionally, it changes the cursor to a pointer when hovering over the label, giving users a visual hint that the label can be interacted with.

Running code

Place the code in appropriate files and open the HTML file in a web browser. Here's a sample example of password input that enables visibility toggling.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved