1. Plugins
  3. Toggle Password

Plugins

Tailwind CSS Toggle Password

Show or hide password field.

Image Description

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

Sign up form with show and hide password button.

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-gray-800 dark:border-gray-700 dark:text-gray-400" value="12345qwerty" required>
                          <button type="button" data-hs-toggle-password='{
                              "target": "#hs-toggle-password"
                            }' class="absolute top-0 end-0 p-3.5">
                            <svg class="flex-shrink-0 text-gray-400 w-4 h-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="flex-shrink-0 text-gray-400 w-4 h-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>

Options

Name Description Options Default value
data-hs-toggle-password Activate a Toggle Password by specifying on an element. — —
: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. — —

Classes

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.
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.

Image Description
Check out Preline UI Toggle Password