• advanced forms
  • Toggle Password

advanced forms

Tailwind CSS Toggle Password

The Toggle Password Component lets users show or hide their password in login or registration forms. It helps them check for accuracy while still keeping sensitive information secure.

Require FlyonUI JS
Class Name
Type
Description
inputComponentBasic input field.
password-active:{tw-utility-class}ModifierA method to apply specific Tailwind classes when the password is visible.
is-validModifierAdds success style to the input.
is-invalidModifierAdds error style to the input.

Basic example

Default

Basic example of toggle password.

Label

Password input with label.

Type

Floating and filled

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.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-toggle-passwordEnable a Toggle Password feature by specifying it on an element.--
:target (required)This function accepts the ID of the content element that should be toggle, typically the ID of an input element.string-
:isShownDetermines password visibility.booleanfalse
:eventTypeDetermines event type.change or clickclick
data-toggle-password-groupThis feature enables you to group multiple toggle password elements together, allowing them to be toggled simultaneously. It should be applied to the parent element containing the toggle password elements.--

Methods

The HSTogglePassword object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
show()Toggle the field to type text.
hide()Toggle the field to type password.
STATIC METHODS
HSTogglePassword.getInstance(target, isInstance)
Returns the element linked to the target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.

Method usage

Assign an ID to the div containing the data-toggle-password attribute, as demonstrated in the public method. To explore additional methods, you can copy them into the console.

Toggle the field to type text (public method).

// This method is used in above example.
const togglePassword = new HSTogglePassword(document.querySelector('#toggle-password-method'));
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
togglePassword.show();
});

Toggle the field to type text (mixed).

const { element } = HSTogglePassword.getInstance('#toggle-password-method', true);
const showBtn = document.querySelector('#show-btn');

showBtn.addEventListener('click', () => {
element.show();
});

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:toggleCalled when the password is shown or hidden.Target

Event usage

Assign an ID to the div that contains the data-toggle-password attribute, and then use that ID to attach an event. The example below demonstrates a use case of event usage. You can view the output in the console by typing in input.

An example where a function is run every time a field changes visibility.

const el = HSTogglePassword.getInstance('#toggle-password-event');

el.on('toggle', (target) => {console.log('target:', target)});