Easy Password Visibility Toggle Plugin For jQuery - password-toggle-input.js

File Size: 6.48 KB
Views Total: 1351
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Password Visibility Toggle Plugin For jQuery - password-toggle-input.js

Just another jQuery plugin for display a customizable toggle button next to the password field that allows to show/hide the password text entered by the user.

See also:

How to use it:

1. By default, the plugin uses Font Awesome 4 for the password visibility toggle icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Create a password visibility toggle box next to the password field as displayed below:

<input type="password" class="password-box" value="password"> 
<div type="password" class="password-box" value="password"></div> 

3. Put both jQuery library and the password-toggle-inaut.js script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.password-toggle-input.js"></script>

4. Initialize the plugin and done.


5. Apply your own CSS styles to the password visibility toggle box.

.password-toggle-input-container {
  position: relative;
  display: inline-block;

.password-toggle-input-container .password-toggle-input-button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;

.password-toggle-input-container input {
  /** input style */

6. Default plugin options.

  state: 'hide', // default state
  containerClass: 'password-toggle-input-container',
  toggleButtonClass: 'password-toggle-input-button',
  inputClass: 'password-toggle-input'

7. Use your own toggle icons:

  iconClass: {
    show: 'fa fa-eye',
    hide: 'fa fa-eye-slash'

This awesome jQuery plugin is developed by artur1989. For more Advanced Usages, please check the demo page or visit the official website.