Preview Purchase
Forms

Tailwind CSS Toggle Password

The Tailwind CSS 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.

Default

A basic usage of Tailwind CSS Toggle Password component.
Preview HTML

Permanent

Use data-toggle-password-permanent="true" attribute to set whether the password remains visible once unmasked, even after typing begins.
Preview HTML

Source Code

The following source file manages the JavaScript behavior of the Tailwind CSS Toggle Password component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/js/core.bundle.js bundle, making it available globally across all pages.
File Description
src/core/components/toggle-password/toggle-password.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Toggle Password component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Toggle Password component. 
				
					<div class="input" data-toggle-password="true">
 <input placeholder="Password" type="password"/>
 <div class="btn btn-icon" data-toggle-password-trigger="true">
  <i class="ki-outline ki-eye toggle-password-active:hidden">
  </i>
  <i class="ki-outline ki-eye-slash hidden toggle-password-active:block">
  </i>
 </div>
</div>

Attributes

The following HTML attributes are utilized by the accordion component to control its JavaScript behavior.
HTML Attribute Description
data-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.

Data Attribute Initialization

Auto-initialize all KTTogglePassword instances on page load by adding the data-toggle-password="true" attribute to your toggle password element. This triggers on the fly initialization by the KTTogglePassword JavaScript component. 
				
					<div class="input" data-toggle-password="true">
 <input placeholder="Password" type="password"/>
 <div class="btn btn-icon" data-toggle-password-trigger="true">
  <i class="ki-outline ki-eye toggle-password-active:hidden">
  </i>
  <i class="ki-outline ki-eye-slash hidden toggle-password-active:block">
  </i>
 </div>
</div>
These attributes allow you to set options for the KTTogglePassword component during initialization. The values you provide as strings are automatically converted to the appropriate KTTogglePassword Options .
HTML Attribute Type Default Description
data-toggle-password boolean true Used to auto-initialize KTTogglePassword instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
data-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.

JavaScript Initialization

To initialize a new toggle password component, pass the corresponding DOM element and configuration options to the KTTogglePassword class constructor.
JavaScript HTML 
				
					// Toggleer element
const togglePasswordEl = document.querySelector('#my_toggle_password');

// Configuration options(optional)
const options = {
	permanent: true
};

// Initialize object
const togglePassword = new KTTogglePassword(togglerEl, options);

To initialize the toggle with JavaScript, use data-toggle-password="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS KTTogglePassword instances, using the KTTogglePassword JavaScript component.
Option Type Default Description
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.

Utilities

Manage and interact with KTTogglePassword instances using these static methods of KTTogglePassword class.
Method Description
init() Automatically initializes KTTogglePassword object for all elements with the data-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.
JavaScript HTML 
				
					// 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);

Methods

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.
JavaScript HTML 
				
					const togglePasswordEl = document.querySelector('#my_toggle_password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);

togglePassword.toggle();

Events

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');
});
Previous Textarea Next ApexCharts