Form password

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

Usage

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

info To use this component you will need to uncomment the Sass include at the bottom of the /assets/styles/sass/elements/_form.scss file.

Example

Markup

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

JavaScript options

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

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