Skip to content

slackero/bootstrap-show-password-toggle

 
 

Repository files navigation

LICENSE NPM Version

Bootstrap Show Password Toggle

A show password as text toggle for Bootstrap forms

  • Native-looking UI
  • Vanilla JavaScript with no dependencies (but jQuery version included to support older browsers)
  • 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

show password toggle

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>
  1. Load the show-password-toggle.min.js after the form. Load the jQuery related version show-password-toggle-jquery.min.js instead if also older browsers should be supported.

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

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

About

A show password as text toggle for Bootstrap forms

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 61.6%
  • JavaScript 20.7%
  • SCSS 17.7%