Advanced forms
Toggle Password
The Toggle Password Component allows users to show or hide their password in forms, helping ensure accuracy while keeping sensitive information secure.
Basic example
Default
Basic example of toggle password.
Label
Password input with label.
Type
Floating
Toggle password example with input type.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
Multiple
Utilize the `data-toggle-password-group` attribute to consolidate multiple passwords under a single toggle icon.
Checkbox
Toggle password visibility with a checkbox.
Modal
Basic usage in modal window.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a toggle password.
JavaScript behavior
Methods — Method usage
The `HSTogglePassword` object is contained within the global `window` object.
JavaScript
const { element } = HSTogglePassword.getInstance('#toggle-password-to-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');
destroyBtn.addEventListener('click', () => {
element.destroy();
});Events — Event usage
METHOD| DESCRIPTION | RETURNING VALUE `on:toggle`| Called when the password is shown or hidden. |Target
JavaScript
const el = HSTogglePassword.getInstance('#toggle-password-event');
el.on('toggle', (target) => {console.log('target:', target)});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
input | component | Basic input field. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
password-active:{tw-utility-class} | variant | A method to apply specific Tailwind classes when the password is visible. |