Overview
Initializes a password visibility toggle button. Clicking the button switches the input type between
password and text, and updates the icon accordingly. The input element must have the data-password-toggle="true" attribute, and a <button> element must be placed immediately after it.Signature
initPwdToggle(element: string | HTMLElement, options?: PasswordToggleOptions): void
| Parameter | Type | Default | Description |
|---|---|---|---|
element |
string | HTMLElement |
- | CSS selector string or HTMLElement. If the element is a container, all input[data-password-toggle="true"] elements inside it will be initialized. |
options.showButtonClass |
string |
"bi bi-eye fs-2" |
CSS class for the "show password" button icon. |
options.hideButtonClass |
string |
"bi bi-eye-slash fs-2" |
CSS class for the "hide password" button icon. |
Example
Type a password and click the eye icon to toggle visibility.
<div id="passwordContainer">
<label class="form-label">Password</label>
<div class="input-group">
<input type="password" data-password-toggle="true"
class="form-control form-control-solid"
placeholder="Enter password">
<button class="btn btn-outline-secondary" type="button"></button>
</div>
</div>
import {initializers} from 'metronic-extension';
const {initPwdToggle} = initializers;
// Initialize all password toggles in the container
initPwdToggle('#passwordContainer');
// With custom icon classes
initPwdToggle('#passwordContainer', {
showButtonClass: 'ki-duotone ki-eye fs-2',
hideButtonClass: 'ki-duotone ki-eye-slash fs-2',
});