Repository files navigation

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
• Supports dark mode (Bootstrap 5 only)
• Only 1KB gzipped

• Download the latest release
• Clone the repogit clone https://github.com/coliff/bootstrap-show-password-toggle.git
• Install withnpmnpm install bootstrap-show-password-toggle
• Install withyarnyarn add bootstrap-show-password-toggle

1. Include theshow-password-toggle.min.css in your CSS

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

<divclass="input-group"><inputtype="password"class="form-control rounded"required><buttonid="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>

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

I highly recommend adding the attributes:spellcheck="false",autocorrect="off" andautocapitalize="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 addname="current-password" andautocomplete="current-password" to help browsers autocomplete the form.

• Bootstrap 5 Demo
• Bootstrap 4 Demo

Works well with all the browserssupported by Bootstrap

Q.Can I change the show password icon?

A. Yes you can change the icon displayed by replacing the.input-password[type="password"]Base64 encoded background image. SVG is recommended.

• If the browser autofills the password input then the user-agent will applybackground-image: none !important.
• The password input requires the use of therequired 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!)

• MDO and Bootstrap team for theicons
• Sam Dutton at Google for the idea and initial JavaScript from the 'Sign-in form Best Practices' article
• BrowserStack for providing the infrastructure that allows us to test in real browsers