Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Input Number Plugin API

Headless, unstyled input number plugin built with JavaScript and TypeScript, including installation, usage, options, methods, events, and selectors.

JavaScript Typescript

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.

  1. Install the plugin

    Install @preline/input-number via npm

    Terminal 
                              
                            npm i @preline/input-number

  2. Add the plugin CSS

    Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

    main.css 
                              
                            @import "tailwindcss";
                            
                            /* @preline/input-number */
                            /* [!code highlight:3] */
                            @source "../node_modules/@preline/input-number/*.js";
                            @import "./node_modules/@preline/input-number/variants.css";
                            @import "./node_modules/@preline/input-number/theme.css";

  3. Add the plugin JavaScript

    Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

    HTML

    Additional Initialization Options

    Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

    HTML (non-auto)

    Via bundler

    When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

    JavaScript (auto) 
                              
                            import "@preline/input-number";
    JavaScript (non-auto) 
                              
                            import HSInputNumber from "@preline/input-number/non-auto";
                            
                            HSInputNumber.autoInit();
                            
                            // Or initialize a specific element manually
                            const el = document.querySelector("#input-number");
                            if (el) new HSInputNumber(el);

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.

Basic usage

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

HTML 
                      
                        <div data-hs-input-number>
                          <input type="text" aria-roledescription="Number field" value="1" data-hs-input-number-input>
                          <button type="button" class="" tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement>
                            Minus
                          </button>
                          <button type="button" class="" tabindex="-1" aria-label="Increase" data-hs-input-number-increment>
                            Add
                          </button>
                        </div>

JavaScript behavior

Data Options

Parameters Description Options Default value
data-hs-input-number Activate an Input Number by specifying on an element. Should be added to the container. — —
: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
:forceBlankValue Whether the input value should be blank when the value isn't set. boolean false

Selectors

Name Description
data-hs-input-number-input Input element.
data-hs-input-number-increment Increment button.
data-hs-input-number-decrement Decrement button.

Tailwind Modifiers

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

Destroy instance.

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

Events

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

Open any item event example.

JavaScript 
                      
                        const el = HSInputNumber.getInstance('#input-number');

                        el.on('change', ({inputValue}) => {...});

Ready to use Components

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

Input Number

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Input Number examples

Input Number

© 2026 Preline Labs.