Show Password Toggle for Bootstrap

Posted on
Contents

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 provided 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

show password toggle

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"] Base64 encoded background image. 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 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

You might also like

Popover CSS Inspector for Bootstrap 5

A customizable style inspector for Bootstrap Popovers

Bootstrap 5 Print Stylesheet

Optimized CSS for printing