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>

JavaScript behavior

Classes

Name	Description
`data-hs-input-number-input`	Input element.
`data-hs-input-number-increment`	Increment button.
`data-hs-input-number-decrement`	Decrement button.
`hs-input-number-disabled:*`	A modifier that allows you to set Tailwind classes when inputs' value is set to zero.

Methods

The HSInputNumber object is contained within the global window object

Method	Description
`HSInputNumber.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`

Events

Method	Description	Returned value
`on:change`	Called when input value was changed.	Current value

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

Tailwind CSS Input Number

On this page