Hide/Show Password Feature Guide

The Hide/Show Password feature improves the user experience by letting users easily toggle between hidden and visible passwords. This small but powerful functionality helps prevent typing mistakes while still maintaining security and privacy.

It’s especially handy on mobile devices, where confirming typed passwords can be tricky. With a simple eye icon , users can check their input before submitting, striking the perfect balance between usability and protection.

HTML Structure​

Here’s the basic setup for creating the password input field with a toggle icon:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<div class="pass">
  <label for="password">Password</label>
  <input type="password" name="password" id="password" required>
  <i class="far fa-eye" id="togglePassword"></i>
</div>

---

CSS Styling​

Add smooth visuals and responsive design with this CSS snippet:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
  font-size: 1.3rem;
}

.pass input {
  margin-top: 10px;
  width: 20rem;
  padding: 0.7rem;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #00000040;
  border: none;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.pass input:focus {
  outline: none;
  border: none;
  box-shadow: 1px 1px 4px #83c5be;
}

#togglePassword {
  margin-left: -35px;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
}

#togglePassword:hover {
  color: #000;
}

---

JavaScript Functionality​

Finally, this JavaScript code enables the toggle effect to switch between password visibility states:

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');

togglePassword.addEventListener('click', function () {
  const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
  password.setAttribute('type', type);
  this.classList.toggle('fa-eye-slash');
});

---

Why Use This Feature?​

Improves accessibility - especially on mobile devices.
Reduces login frustration due to mistyped passwords.
Enhances security awareness while maintaining ease of use.
By implementing this feature, you’ll create a smoother, more user-friendly interface that meets modern web usability standards.