How to Show or Hide a Password in a Webflow Input

Learn how to add a show/hide password button to a Webflow field with JavaScript.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a show/hide button to a password field in Webflow.

Example

Element	Class	Role
Password input	password-input	Input field (type=password)
Toggle button	password-toggle	Eye button next to the field
Visible icon	icon-show	SVG or text 'Show'
Hidden icon	icon-hide	SVG or text 'Hide'

1. Build the structure in Webflow

Create a Div containing a Password input (class password-input) and a button (class password-toggle) side by side. Position the button absolutely on the right of the input if needed.

2. The script

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
  var input = toggle.closest('div').querySelector('.password-input');
  if (!input) return;
  var show = toggle.querySelector('.icon-show');
  var hide = toggle.querySelector('.icon-hide');
  if (hide) hide.style.display = 'none';

  toggle.addEventListener('click', function() {
    var isPassword = input.type === 'password';
    input.type = isPassword ? 'text' : 'password';
    if (show) show.style.display = isPassword ? 'none' : 'block';
    if (hide) hide.style.display = isPassword ? 'block' : 'none';
  });
});

Simplified version (text only)

If you just want a text link "Show / Hide" without icons:

document.querySelectorAll('.password-toggle').forEach(function(toggle) {
  var input = toggle.closest('div').querySelector('.password-input');
  toggle.addEventListener('click', function() {
    var isPass = input.type === 'password';
    input.type = isPass ? 'text' : 'password';
    toggle.textContent = isPass ? 'Hide' : 'Show';
  });
});

good to know

Add aria-label='Show password' to your toggle button for accessibility. Update the aria-label dynamically in the script based on the state (Show/Hide). Screen readers will announce the available action, making the form accessible to blind users.

Conclusion

The password toggle improves UX on every password form. It’s essential on mobile, where typing is more error-prone.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss