# Show/Hide Button on Front-End Password Fields

> Adds an accessible "Show" button inside password fields on the front of the site (account, checkout and membership forms), so visitors can check what they typed.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: forms, passwords, usability, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-password-visibility-toggle/

## Code

```html
<style>
.wpide-pw-wrap{position:relative;display:block;}
.wpide-pw-wrap input{padding-right:4.5em!important;width:100%;}
.wpide-pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);padding:4px 8px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:.85em;font-weight:600;cursor:pointer;}
.wpide-pw-toggle:focus-visible{outline:2px solid currentColor;}
</style>
<script>
document.querySelectorAll('input[type="password"]').forEach(function (input) {
    if (input.closest('.password-input, .wp-pwd, .wpide-pw-wrap') || input.nextElementSibling && input.nextElementSibling.matches('button, .show-password-input')) { return; }
    var wrap = document.createElement('span');
    wrap.className = 'wpide-pw-wrap';
    input.parentNode.insertBefore(wrap, input);
    wrap.appendChild(input);
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'wpide-pw-toggle';
    btn.textContent = 'Show';
    btn.setAttribute('aria-pressed', 'false');
    btn.setAttribute('aria-label', 'Show password');
    btn.addEventListener('click', function () {
        var show = input.type === 'password';
        input.type = show ? 'text' : 'password';
        btn.textContent = show ? 'Hide' : 'Show';
        btn.setAttribute('aria-pressed', show ? 'true' : 'false');
        btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
        input.focus();
    });
    wrap.appendChild(btn);
});
</script>
```

## Notes

Fields that already have a toggle (such as WooCommerce's) are skipped. The login page has its own built-in button.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Show/Hide Button on Front-End Password Fields" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/