@slackero/bootstrap-show-password-toggle

1.3.3 • Public • Published

LICENSE NPM Version

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

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

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

Package Sidebar

Install

npm i @slackero/bootstrap-show-password-toggle

Weekly Downloads

3

Version

1.3.3

License

MIT

Unpacked Size

26.8 kB

Total Files

12

Last publish

Collaborators

  • slackero