Password

Create a form with a toggle to hide or show passwords.


Usage

To apply this component, add the form-password class to a <div> element around a password input field. To create a toggle for showing or hiding passwords, just add the .form-password-toggle class and the data-password attribute to an <a> element.

Example

Markup

<form class="form">
    <div class="password">
        <input type="password">
        <a href="#" class="password-toggle" data-password>...</a>
    </div>
</form>

JavaScript options

This is an example of how to set options via attribute:

data-password="{lblShow:'...', lblHide:'...'}"
Option Possible value Default Description
lblShow any string 'Show' Hide label text
lblHide any string 'Hide' Show label text