Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Toggle Password Plugin API

Headless, unstyled toggle password plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

JavaScript Typescript

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.

  1. Install the plugin

    Install @preline/toggle-password via npm

    Terminal 
                              
                            npm i @preline/toggle-password

  2. Add the plugin CSS

    @import the plugin's CSS file into your Tailwind CSS file.

    main.css 
                              
                            @import "tailwindcss";
                            
                            /* @preline/toggle-password */
                            /* [!code highlight:1] */
                            @import "./node_modules/@preline/toggle-password/theme.css";

  3. Add the plugin JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

    HTML

    Additional Initialization Options

    Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

    HTML (non-auto)

    Via bundler

    When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

    JavaScript (auto) 
                              
                            import "@preline/toggle-password";
    JavaScript (non-auto) 
                              
                            import HSTogglePassword from "@preline/toggle-password/non-auto";
                            
                            HSTogglePassword.autoInit();
                            
                            // Or initialize a specific element manually
                            const el = document.querySelector("#toggle-password");
                            if (el) new HSTogglePassword(el);

Example

Sign up form with show and hide password button.

Basic usage

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

HTML 
                      
                        <div class="relative">
                          <input id="hs-toggle-password" type="password" name="password" class="py-3 px-4 block w-full border-stone-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 inset-e-0 flex items-center pointer-events-none z-10 p-3.5">
                            <svg class="shrink-0 text-stone-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-stone-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).

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

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

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

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

Ready to use Components

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

Toggle Password

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Toggle Password examples

Toggle Password

© 2026 Preline Labs.