jQuery and Bootstrap show hide password plugin

A nice addition for password inputs in forms – Bootstrap show hide password plugin, powered by jQuery.

Bootstrap show hide password

It’s a jQuery plugin, that allows the user to toggle the password input field text visibility by clicking the toggle icon (checkbox). Styling with Twitter’s Bootstrap v2 and / or v3.

Bootstrap show / hide password plugin example
Bootstrap show / hide password plugin example

Basic usage

The plugin acts on input elements (typically password fields):

<input id="password" class="form-control" type="password"

We can use it via data attributes:

<input data-toggle="password">

or via JavaScript:



.password(‘show’) – manually show the password


.password(‘hide’) – manually hide the password


.password(‘toggle’) – manually toggle the password


.password(‘val’, [value]) – get the current value of the password or set the value of password

$('#password').password('val'); // get value
$('#password').password('val', 'password'); // set value

There are also customizable parameters and events to use.

For example:

$('#password').on('show.bs.password', function (e) {
    // code here

More in a small documentation @ GitHub.

License: MIT



Get Bootstrap show hide password plugin from GitHub:


You may also like:

jQuery show and hide password plugin

jQuery password generator with strength meter – pwdMeter

Create a beautiful password strength meter