Documentation v3.0.16

Overview

Implements a password toggle for the password input element specified by the data-password-toggle attribute.
An action button must be placed to the right of the password input element in advance.
See the example for details.

Reference

Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • options.showButtonClass?: string
    CSS class to be applied to the button that shows the password. Default is "bi bi-eye fs-2".
  • options.hideButtonClass?: string
    CSS class to be applied to the button that hides the password. Default is "bi bi-eye-slash fs-2".

Basic

Set the data-password-toggle attribute on the password input element and initialize it with the password toggle function.
<!--begin::Input group-->
<div class="input-group">
  <!--begin::Input-->
  <input id="password" data-password-toggle="true" class="form-control" type="password" placeholder="Enter password" value="Dog.lov3r" />
  <!--end::Input-->
  <!--begin::Button-->
  <button type="button" class="btn btn-icon btn-light"></button>
  <!--end::Button-->
</div>
<!--end::Input group-->
import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
components.initPasswordToggle(document.getElementById('password'));

Batch initialization

Password toggles for multiple password input elements can be initialized at once.
In that case, initialize the parent element of the password input element that has the data-password-toggle attribute with the password toggle function.
<!--begin::Wrapper-->
<div id="wrapper">
  <!--begin::Input group-->
  <div class="input-group mb-10">
    <!--begin::Input-->
    <input data-password-toggle="true" class="form-control" type="password" placeholder="Enter password" value="W!Xy@5TJS" />
    <!--end::Input-->
    <!--begin::Button-->
    <button type="button" class="btn btn-icon btn-light"></button>
    <!--end::Button-->
  </div>
  <!--end::Input group-->
  <!--begin::Input group-->
  <div class="input-group">
    <!--begin::Input-->
    <input data-password-toggle="true" class="form-control" type="password" placeholder="Enter password" value="2l$P$3YEV" />
    <!--end::Input-->
    <!--begin::Button-->
    <button type="button" class="btn btn-icon btn-light"></button>
    <!--end::Button-->
  </div>
  <!--end::Input group-->
</div>
<!--end::Wrapper-->
import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
components.initPasswordToggle(document.getElementById('wrapper'));