Skip to content

Recommend Gemeos to your network and earn a commission

Discover our referral program
Let’s talk?

CRO / Conversion3 min read

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

ElementClassRole
Password inputpassword-inputInput field (type=password)
Toggle buttonpassword-toggleEye button next to the field
Visible iconicon-showSVG or text 'Show'
Hidden iconicon-hideSVG 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';
  });
});

Conclusion

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

Published on May 19, 2026

Sandro DA SILVA

Growth Marketer, Webflow expert, and jack-of-all-trades. Sandro handles commercial operations, ensures projects run smoothly, and addresses marketing-related issues (SEO, Tracking, Copywriting, etc).

You might be interested in these tutorials

Related tutorials

See all

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

Let’s f*****G GO !!