The Tailwind Toggle Password component allows users to easily switch between displaying and hiding their password input. This enhances security and user experience by providing a clear and intuitive way to manage password visibility.
A basic usage of Tailwind Toggle Password component.
Use data-kt-toggle-password-permanent="true" attribute to set whether the password remains visible once unmasked, even after typing begins.
These data attributes allow you to set options for the toggle-password component during auto initialization.
| Name | Type | Default | Description |
| ----------------------------------- | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| data-kt-toggle-password-permanent | boolean | "false" | Determines whether the password remains visible once unmasked, even after typing begins. By default the password is automatically hidden again when typing starts if it was set to visible. | |
This table details the custom classes and data attributes used by the toggle-password component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-toggle-password="true" | Used to auto-initialize KTTogglePassword instances on page load. |
data-kt-toggle-password-trigger="true" | Identifies an element as the control for toggling the password visibility, allowing the user to switch between showing and hiding the password. |
Custom modifiers to control the toggle-password’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-toggle-password-active:* | A modifier that applies specific Tailwind classes when the section becomes active. |
Use KTTogglePassword component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTTogglePassword(element, options) | Creates an object instance of KTTogglePassword class for the given DOM element and configuration options . |
toggle() | Switches the password visibility state. If the password is currently hidden, it becomes visible, and vice versa. |
setVisible(flag) | Sets the password visibility explicitly based on the flag parameter. If flag is true , the password is made visible. if false , the password is masked. |
isActive() | Returns a boolean value indicating whether the password visibility is currently active (i.e., if the password is visible, it returns true ; otherwise, it returns false` ). |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTTogglePassword instance. |
getElement() | Retrieves the DOM element linked to a specific KTTogglePassword instance. |
on(eventName, handler) | Allows attaching event listeners to the KTTogglePassword custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTTogglePassword. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTTogglePassword instance from an element, including any associated data stored on the DOM element. |
const togglePasswordEl = document.querySelector('#my-toggle-password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);
togglePassword.toggle();Manage and interact with KTTogglePassword instances using these static methods of KTTogglePassword JavaScript class.
| Method | Description |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
| init() | Automatically initializes KTTogglePassword object for all elements with the data-kt-toggle="true" attribute on page load. |
| createInstances() | Allows to create KTTogglePassword instances for all elements that have been dynamically added to the DOM but haven't been activated yet. | |
| getInstance(element) | Returns the KTTogglePassword object associated with the given DOM element element . |
| getOrCreateInstance(element) | Returns the existing KTTogglePassword object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |
// Initialize all togglees
KTTogglePassword.init();
// Initialzie pending togglees
KTTogglePassword.createInstances();
// Get toggle object
const togglePasswordEl = document.querySelector('#my-toggle-password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);KTTogglePassword custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
toggle | Triggered immediately before an password visibility is changed. |
toggled | Triggered immediately after an password visibility is changed. |
const togglePasswordEl = document.querySelector('#my-toggle-password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);
togglePassword.on('toggle', () => {
detail.cancel = true;
console.log('toggle action canceled');
});
togglePassword.on('toggled', () => {
console.log('toggled event');
});