1. Plugins
  2. Input Number

Plugins

Tailwind CSS Input Number

Input Number - input idea for Shop systems or so.

Input Number

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.

Select quantity

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>

Options

Parameters Description Options Default value
data-hs-input-number Activate an Input Number by specifying on an element. — —
min Defines the minimum possible value. -Infinity allows you to enter negative values without restrictions. number | "-Infinity" 0
max Defines the maximum possible value. number | null null
step Determines the step by which the value will increase or decrease. number 1

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.

Image Description
Check out Preline UI Dismiss