Password Toggle in HTML – Show or Hide Password Easily

Sometimes users want to check what they typed in a password field. Adding a show or hide password feature is one of the simplest and most useful touches you can make in a form. The best part is that you can do it with pure HTML, no JavaScript required.

Step 1: Create a basic password input

We start with a regular input field where the type is set to password. This hides the characters automatically.

<input placeholder="Password" type="password" id="pwd">

When you type, you’ll see dots or asterisks instead of letters. That’s how browsers keep passwords private.

Step 2: Add a checkbox to toggle visibility

Now we add a second input, a checkbox. It will control the visibility of the password field.
We use an inline onclick event to switch the password type between password and text.

<input type="checkbox" onclick="pwd.type = this.checked ? 'text' : 'password'">

When the box is checked, the password becomes visible. When unchecked, it hides again.

Step 3: Combine everything

Here’s the full working code snippet. You can paste it directly into your HTML and it will work immediately.

<input placeholder="Password" type="password" id="pwd">
<input type="checkbox" onclick="pwd.type = this.checked ? 'text' : 'password'">

Step 4: Add some simple styling

You can give the input and checkbox a clean modern look with a few lines of CSS.

input[type="password"],
input[type="text"] {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: 0.2s;
}

input[type="password"]:focus,
input[type="text"]:focus {
  border-color: #0078ff;
  box-shadow: 0 0 5px #0078ff33;
}

input[type="checkbox"] {
  margin-left: 10px;
  transform: scale(1.2);
  cursor: pointer;
}

Now your password field looks neat and the checkbox feels natural to click.
This small feature improves user experience and makes your form feel more professional.