Tailwind CSS Toggle Password

Show or hide password field.

Installation

To get started, install Toggle Password plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/toggle-password

Example

Password

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div class="relative">
                          <input id="hs-toggle-password" type="password" name="password" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400" value="12345qwerty" required>
                          <button type="button" data-hs-toggle-password='{
                              "target": "#hs-toggle-password"
                            }' class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-10 p-3.5">
                            <svg class="shrink-0 text-gray-400 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path class="hs-password-active:hidden" d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                              <path class="hs-password-active:hidden" d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                              <path class="hs-password-active:hidden" d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                              <path class="hidden hs-password-active:block" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                              <path class="hidden hs-password-active:block" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                            </svg>
                            <span class="hs-password-active:hidden">
                              <svg class="shrink-0 text-gray-400 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                              </svg>
                            </span>
                          </button>
                        </div>

JavaScript behavior

Data Options

Name	Description	Options	Default value
`data-hs-toggle-password`	Activate a Toggle Password by specifying on an element. Should be added to the button (trigger).	—	—
`:target` (required)	Determines which element will change type on click. This must be a valid selector.	string	—
`:isShown`	Determines password visibility.	boolean	`false`
`:eventType`	Determines event type.	'change' \| 'click'	`click`
`data-hs-toggle-password-group`	This option allows you to group multiple toggle password elements together so that they can be toggled simultaneously. It should be added to the parent element of the toggle password elements.Activate a Toggle Password by specifying on an element. Should be added to the container.	—	—

Tailwind Modifiers

Name	Description
`hs-password-active:*`	A modifier that allows you to set Tailwind classes when the password was shown.

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.
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSTogglePassword.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Toggle the field to type text (public method).

                      
                        const togglePassword = new HSTogglePassword(document.querySelector('#toggle-password'));
                        const showBtn = document.querySelector('#show-btn');

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

Toggle the field to type text (mixed).

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

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

Events

Method	Description	Returned value
`on:toggle`	Called when password was shown or hide.	Target

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

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

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

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components

Tailwind CSS Toggle Password

On this page