Bootstrap Show Password Toggle

A show password as text toggle for Bootstrap forms

• 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
• Works with Bootstrap 4 and 5
• Only 1KB gzipped

Quick Start

• Download the latest release
• Clone the repo git clone https://github.com/slackero/bootstrap-show-password-toggle.git
• Install with npm npm i @slackero/bootstrap-show-password-toggle

Usage

1. Include the show-password-toggle.css in your CSS

2. Wrap the password input in an input-group div as follows:

<div class="input-group">
  <input type="password"
         class="form-control rounded"
         required
         data-show="Show password as plain text."
         data-hide="Hide password."
  >
</div>

3. Load the show-password-toggle.min.js after the form

I highly recommend adding the attributes: spellcheck="false" and autocapitalize="off" to the password input so that 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 id="current-password" and autocomplete="current-password" to help browsers autocomplete the form.

Demo

• Bootstrap 4 Demo
• Bootstrap 4 Demo with jQuery
• Bootstrap 5 Demo

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

• For browsers without Element.after() load show-password-toggle-jquery.min.js instead. jQuery or Cash needs to be loaded before.

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