- Plugins
- Input Number
Plugins
Tailwind CSS Input Number
Input Number - input idea for Shop systems or so.
Installation
To get started, install Input Number plugin via npm, else you can skip this step if you are already using Preline UI as a package.
npm i @preline/input-number
Example
Wrap the input-number's toggle data-hs-input-number-input
and buttons data-hs-input-number-decrement
with data-hs-input-number-increment
within data-hs-input-number
.
<div class="py-2 px-3 bg-white border border-gray-200 rounded-lg dark:bg-slate-900 dark:border-gray-700">
<div class="w-full flex justify-between items-center gap-x-3" data-hs-input-number>
<div>
<span class="block text-xs text-gray-500 dark:text-gray-400">
Select quantity
</span>
<input class="p-0 bg-transparent border-0 text-gray-800 focus:ring-0 dark:text-white" type="text" value="1" data-hs-input-number-input>
</div>
<div class="flex justify-end items-center gap-x-1.5">
<button type="button" class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-input-number-decrement>
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
</button>
<button type="button" class="w-6 h-6 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-input-number-increment>
<svg class="flex-shrink-0 w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</button>
</div>
</div>
</div>
Basic usage
Prefer to create your own style? Here is a completely unstylized example.
<div data-hs-input-number>
<input type="text" value="1" data-hs-input-number-input>
<button type="button" class="" data-hs-input-number-decrement>
Minus
</button>
<button type="button" class="" data-hs-input-number-increment>
Add
</button>
</div>
Events
Open any item event example.
const el = HSInputNumber.getInstance('#input-number');
el.on('change', ({inputValue}) => {...});
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 Input Number