- Plugins
- PIN Input
Plugins
Tailwind CSS PIN Input
A PIN Input plugin that allows to fill in data for inputs.
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
.
<div class="py-2 px-3 bg-white border border-gray-200 rounded-lg dark:bg-slate-900 dark:border-gray-700">
<div class="flex space-x-5" data-hs-pin-input>
<input class="block w-[38px] h-[38px] text-center border-gray-200 rounded-md text-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" type="text" placeholder="○" data-hs-pin-input-item autofocus>
<input class="block w-[38px] h-[38px] text-center border-gray-200 rounded-md text-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" type="text" placeholder="○" data-hs-pin-input-item>
<input class="block w-[38px] h-[38px] text-center border-gray-200 rounded-md text-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" type="text" placeholder="○" data-hs-pin-input-item>
<input class="block w-[38px] h-[38px] text-center border-gray-200 rounded-md text-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" type="text" placeholder="○" data-hs-pin-input-item>
</div>
</div>
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>
Events
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.
Check out Preline UI PIN Input