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


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.



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

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