CRO / Conversion

5 views

3 min

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.

How to Show or Hide a Password in a Webflow Input

Example

1. Build the structure in Webflow

2. The script

Simplified version (text only)

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials