1. Plugins
  2. PIN Input

Plugins

Tailwind CSS PIN Input

A PIN Input plugin that allows to fill in data for inputs.

PIN Input

Installation

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

                      
                        npm i @preline/pin-input

Example

Wrap the PIN Input's toggle data-hs-pin-input-item within data-hs-pin-input.

Basic usage

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

                      
                        <div data-hs-pin-input>
                          <input type="text" data-hs-pin-input-item>
                          <input type="text" data-hs-pin-input-item>
                          <input type="text" data-hs-pin-input-item>
                          <input type="text" data-hs-pin-input-item>
                        </div>

JavaScript behavior

Data Options

Name Description Options Default value
data-hs-pin-input Activate a Pin Input by specifying on an element. Should be added to the container. — —
:availableCharsRE Regular expression string for available characters. RegExp ^[a-zA-Z0-9]+$
data-hs-pin-input-item Determines which element inside the initialized container will be responsible for entering data. Should be added to the input. — —

Class Options

Name Description Options Default value
autofocus If one of the fields has this class, it will be focused when the page loads. — —

Tailwind Modifiers

Name Description
hs-pin-input-active:* The class is added to the input when the PIN has set up.

Methods

The HSPinInput object is contained within the global window object

Method Description
Public methods
destroy() Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
HSPinInput.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

Destroy instance.

                      
                        const { element } = HSPinInput.getInstance('#pin-input', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });

Events

Method Description Returned value
on:completed The event is triggered when the PIN has set up. Current value

When pin is filled example.

                      
                        const el = HSPinInput.getInstance('#pin-input');

                        el.on('completed', ({currentValue}) => {...});

Demo examples

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

Plugins UI Mockups
Check out Preline UI Components