Sign-in forms should have a ‘Show password’ option so users can check the text they’ve entered is correct before submitting. Sam Dutton’s excellent Sign-in form best practices article provides a helpful solution for providing a text based show-password toggle.

I thought it’d be nice to have a native-looking button which displays inside the password input box so I spent some time creating a small JavaScript/CSS solution optimised to use with Bootstrap which is:

• Native-looking UI
• Vanilla JavaScript with no dependencies
• Base64 encoded SVG icons (no external images or fonts required)
• Graceful fallback for browsers with JavaScript disabled
• Only 1KB gzipped

To add it to your site include the show-password-toggle.css and wrap the password input in an input-group div as follows:

<div class="input-group">
  <input type="password" id="password"  class="form-control rounded-right" required>
  <button id="toggle-password" type="button" class="d-none"
    aria-label="Show password as plain text. Warning: this will display your password on the screen.">
  </button>
</div>

I highly recommend adding the attributes: spellcheck="false", autocorrect="off" and autocapitalize="off" to the password input so when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath).

You should also add name="current-password" and autocomplete="current-password" to the password input to help browsers autocomplete the form.

You should load the show-password-toggle.js after the form. Note: Internet Explorer 11 natively includes a ‘show password as plain text’ so you may wish to not load this library for IE users. You can add the type="module" attribute so that it only loads on modern browsers.

More info on GitHub

Demo

Demo page

Browser Support

Works well with all the browsers supported by Bootstrap

FAQS

Q. Can I change the show password icon?

A. You could change the icon displayed by replacing the .input-password[type="password"] background image. A Base64 encoded SVG is recommended.

Known Issues

• Edge (Chromium) has a native ‘show-password’ toggle icon. We could use user-agent sniffing to disable this script for this browser.
• If the browser autofills the password input then the user-agent’s stylesheet will apply background-image: none !important
• The password input requires the use of the required attribute. This is so the background-image is not displayed when the input is empty. (It’d be great if browsers supported the :blank pseudo-selector!

Credits and Thanks

• MDO and Bootstrap team for the icons
• Sam Dutton at Google for the idea and initial JavaScript from the ‘Sign-in form Best Practises’ article

This article was cross-posted from: https://christianoliff.com/blog/show-password-toggle