Show Password Toggle for Bootstrap
Posted: July 07, 2020
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.
- Native-looking UI
- Base64 encoded SVG icons (no external images or fonts required)
- 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:
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
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
Works well with all the browsers supported by Bootstrap
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.
- 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
requiredattribute. 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
Leave a Comment
Your email address will not be published. Required fields are marked *