PHPackages coliff/bootstrap-show-password-toggle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. coliff/bootstrap-show-password-toggle ActiveLibrary[Utility & Helpers](/categories/utility) coliff/bootstrap-show-password-toggle ===================================== A show password as text toggle for Bootstrap 45017[4 issues](https://github.com/coliff/bootstrap-show-password-toggle/issues)[2 PRs](https://github.com/coliff/bootstrap-show-password-toggle/pulls)HTMLCI passing Since Jun 3Pushed 1mo ago1 watchersCompare [ Source](https://github.com/coliff/bootstrap-show-password-toggle)[ Packagist](https://packagist.org/packages/coliff/bootstrap-show-password-toggle)[ RSS](/packages/coliff-bootstrap-show-password-toggle/feed)WikiDiscussions main Synced today READMEChangelog (6)DependenciesVersions (8)Used By (0) [![LICENSE](https://camo.githubusercontent.com/891419a00e04aa0e311068fa8a04eec92cab4f7026c76278279bf2a1da50e578/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d6c69676874677265792e737667)](https://raw.githubusercontent.com/coliff/bootstrap-show-password-toggle/master/LICENSE)[![GitHub Super-Linter](https://github.com/coliff/bootstrap-show-password-toggle/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)[![GitHub Stars](https://camo.githubusercontent.com/e0bc476c1a0a7e42658d3b0ca24c8431b44fcd0635e1e2cd2fcad35b684a2443/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f636f6c6966662f626f6f7473747261702d73686f772d70617373776f72642d746f67676c652e7376673f6c6162656c3d6769746875622532307374617273)](https://github.com/coliff/bootstrap-show-password-toggle)[![npm Version](https://camo.githubusercontent.com/90a0a43a74de1dc299d70bd317d5f9246ac0ff4f73efd464ea915d808bfc22c5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626f6f7473747261702d73686f772d70617373776f72642d746f67676c65)](https://www.npmjs.com/package/bootstrap-show-password-toggle)[![npm Downloads](https://camo.githubusercontent.com/e20796fee211c9afe6a0145be7d9b5c93591e7958046d5f27b74e8df09918ff1/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f626f6f7473747261702d73686f772d70617373776f72642d746f67676c652e737667)](https://www.npmjs.com/package/bootstrap-show-password-toggle) Bootstrap Show Password Toggle ============================== [](#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 - Supports dark mode (Bootstrap 5 only) - Only 1KB gzipped [![show password toggle](https://camo.githubusercontent.com/5a9b67386eb3d0e955369a7be032a4a5a9b8f909e7a03fc38a5d7f78fba46614/68747470733a2f2f63687269737469616e6f6c6966662e636f6d2f696d672f323032302f73686f772d70617373776f72642d746f67676c652d616e696d2e676966)](https://camo.githubusercontent.com/5a9b67386eb3d0e955369a7be032a4a5a9b8f909e7a03fc38a5d7f78fba46614/68747470733a2f2f63687269737469616e6f6c6966662e636f6d2f696d672f323032302f73686f772d70617373776f72642d746f67676c652d616e696d2e676966) Quick Start ----------- [](#quick-start) - [Download the latest release](https://github.com/coliff/bootstrap-show-password-toggle/) - Clone the repo `git clone https://github.com/coliff/bootstrap-show-password-toggle.git` - Install with [npm](https://www.npmjs.com/package/bootstrap-show-password-toggle) `npm install bootstrap-show-password-toggle` - Install with [yarn](https://yarnpkg.com/package/bootstrap-show-password-toggle) `yarn add bootstrap-show-password-toggle` Usage ----- [](#usage) 1. Include the `show-password-toggle.min.css` in your CSS 2. Wrap the password input in an `input-group` div as follows: ``` ``` 3. Load the `show-password-toggle.min.js` after the form I highly recommend adding the attributes: `spellcheck="false"`, `autocorrect="off"` 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 `name="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form. Demo ---- [](#demo) - [Bootstrap 5 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/) - [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/) Browser Support --------------- [](#browser-support) Works well with all the browsers [supported by Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers) FAQS ---- [](#faqs) 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](https://yoksel.github.io/url-encoder/) background image. SVG is recommended. Known Issues ------------ [](#known-issues) - 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 `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) pseudo-selector!) Credits and Thanks ------------------ [](#credits-and-thanks) - MDO and Bootstrap team for the [icons](https://icons.getbootstrap.com/icons/eye-slash/) - Sam Dutton at Google for the idea and initial JavaScript from the '[Sign-in form Best Practices](https://web.dev/sign-in-form-best-practices/)' article - [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers ### Health Score 27 — LowBetter than 47% of packages Maintenance60 Regular maintenance activity Popularity15 Limited adoption so far Community17 Small or concentrated contributor base Maturity18 Early-stage or recently created project Bus Factor1 Top contributor holds 65.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/a6068e9ba0ce8defec6b107f1cc3b99c2fd91f75298b48f71cc3dbfdc20870a8?d=identicon)[coliff](/maintainers/coliff) --- Top Contributors [![coliff](https://avatars.githubusercontent.com/u/1212885?v=4)](https://github.com/coliff "coliff (238 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (118 commits)")[![Codex](https://avatars.githubusercontent.com/in/2248422?v=4)](https://github.com/Codex "Codex (5 commits)")[![atefBB](https://avatars.githubusercontent.com/u/10966925?v=4)](https://github.com/atefBB "atefBB (2 commits)")[![dan-jensen](https://avatars.githubusercontent.com/u/3031162?v=4)](https://github.com/dan-jensen "dan-jensen (1 commits)") --- Tags bootstrapbootstrap-formsformshacktoberfestpassword-toggle ### Embed Badge ![Health badge](/badges/coliff-bootstrap-show-password-toggle/health.svg) ``` [![Health](https://phpackages.com/badges/coliff-bootstrap-show-password-toggle/health.svg)](https://phpackages.com/packages/coliff-bootstrap-show-password-toggle) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)