advanced forms
Tailwind CSS Input Number
The Input Number, or Quantity Selector, lets users specify quantities easily, making it ideal for selecting product amounts or seats with simple controls.
Class Name | Type | Description |
|---|---|---|
| input | Component | Basic input field. |
| input-group | Component | Adds inline addons to inputs. |
| input-number-disabled:{tw-utility-class} | Modifier | The modifier allows setting Tailwind classes when input’s value is set to zero. |
| is-valid | Modifier | Adds success style to the input. |
| is-invalid | Modifier | Adds error style to the input. |
Basic example of input number.
Enclose the data-input-number-input and data-input-number-decrement elements of the input-number within data-input-number-increment within data-input-number.
<div class="input-group max-w-sm" data-input-number>
<input class="input" type="text" value="1" aria-label="Input number" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Input number with label.
<label class="label-text" for="number-input-label">Quantity:</label>
<div class="input-group max-w-sm" data-input-number>
<input class="input" id="number-input-label" type="text" value="0" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Success state can be show using is-valid class.
<div class="input-group max-w-sm" data-input-number>
<input class="input is-valid" valid type="text" value="1" aria-label="success state" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Error state can be show using is-invalid class.
<div class="input-group max-w-sm" data-input-number>
<input class="input is-invalid" type="text" value="1" aria-label="error state" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Basic disabled state.
<div class="input-group max-w-sm" data-input-number>
<input class="input" type="text" value="1" aria-label="Disable input number" data-input-number-input disabled />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Vertically stacked buttons example.
<label class="label-text" for="number-input-vertically">Quantity:</label>
<div class="input-group max-w-sm rounded-tooltip" data-input-number>
<input class="input" id="number-input-vertically" type="text" value="0" data-input-number-input />
<span class="input-group-text divide-base-content/25 border-base-content/25 flex-col divide-y border-s pe-0" >
<button type="button" class="flex size-[1.125rem] items-center justify-center" aria-label="Increment button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="flex size-[1.125rem] items-center justify-center" aria-label="Decrement button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Horizontally stacked buttons example.
<label class="label-text" for="number-input-horizontally">Quantity:</label>
<div class="input-group max-w-sm" data-input-number>
<input class="input" id="number-input-horizontally" type="text" value="0" data-input-number-input />
<span class="input-group-text divide-base-content/25 border-base-content/25 divide-x border-s pe-0 rtl:divide-x-reverse" >
<button type="button" class="size-9.5 flex items-center justify-center" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="size-9.5 flex items-center justify-center" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Horizontally stretched buttons example.
<label class="label-text" for="number-input-stretched">Quantity:</label>
<div class="input-group max-w-sm" data-input-number>
<span class="input-group-text border-base-content/25 border-e ps-0">
<button type="button" class="size-9.5 flex items-center justify-center" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
</span>
<input class="input" id="number-input-stretched" type="text" value="0" data-input-number-input />
<span class="input-group-text border-base-content/25 border-s pe-0">
<button type="button" class="size-9.5 flex items-center justify-center" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Here’s a simple example: demonstrate setting a maximum width for the main container.
<label class="label-text" for="number-input-mini">Quantity:</label>
<div class="input-group max-w-32" data-input-number>
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
</span>
<input class="input text-center" id="number-input-mini" type="text" value="0" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Here’s an example of a movie ticket booking number counter.
Number of seat
Number of Bucket
<!-- Number of seat -->
<div class="input-group max-w-xs" data-input-number>
<span class="input-group-text border-base-content/25 border-e ps-0">
<button type="button" class="flex size-12 items-center justify-center" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
</span>
<input class="input pb-0.5 text-center" id="number-input-booking" type="text" value="0" aria-label="seat counter" data-input-number-input />
<div class="absolute bottom-1 start-1/2 flex -translate-x-1/2 items-center rtl:translate-x-1/2">
<span class="icon-[tabler--ticket] text-base-content/80 me-2"></span>
<span class="text-xs text-base-content/80 text-nowrap">Number of seat</span>
</div>
<span class="input-group-text border-base-content/25 border-s pe-0">
<button type="button" class="flex size-12 items-center justify-center" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>
<!-- Number of Bucket -->
<div class="input-group mt-4 max-w-xs" data-input-number>
<span class="input-group-text border-base-content/25 border-e ps-0">
<button type="button" class="flex size-12 items-center justify-center" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
</span>
<input class="input pb-0.5 text-center" id="number-input-bucket" type="text" value="0" aria-label="Bucket counter" data-input-number-input />
<div class="absolute bottom-1 start-1/2 flex -translate-x-1/2 items-center rtl:translate-x-1/2">
<span class="icon-[tabler--brand-bitbucket] text-base-content/80 me-2"></span>
<span class="text-xs text-base-content/80 text-nowrap">Number of Bucket</span>
</div>
<span class="input-group-text border-base-content/25 border-s pe-0">
<button type="button" class="flex size-12 items-center justify-center" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>Increase or decrease values in steps. This example uses a ":step" value of 5.
<div class="input-group max-w-sm" data-input-number='{ "step": 5 }'>
<input class="input" type="text" value="0" aria-label="step control" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>You can control the minimum value with ":min" and set the maximum value with ":max".
In the example below, the maximum number that can be selected is 15.
<div class="input-group max-w-sm" data-input-number='{ "max": 15 }'>
<input class="input" type="text" value="15" aria-label="Maximum value input" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>In the example below, the minimum number that can be selected is -15.
<div class="input-group max-w-sm" data-input-number='{ "min": -15 }'>
<input class="input" type="text" value="-15" aria-label="Minumum value input" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div>
FlyonUI is powered by Preline’s unstyled, headless Tailwind plugins to deliver accessible and responsive user interfaces.
PARAMETERS | DESCRIPTION | OPTIONS | DEFAULT VALUE |
|---|---|---|---|
data-input-number | Activate an Input Number by specifying on an element. | - | - |
data-input-number-input | Applied to the input element. | - | - |
data-input-number-increment | Applied to the increment button. | - | - |
data-input-number-decrement | Applied to the decrement button. | - | - |
:step | Determines the step by which the value will increase or decrease. | number | 1 |
:min | Defines the minimum value that can be entered. Setting it to -Infinity allows unrestricted negative values. | number / “-Infinity” | 0 |
:max | max Defines the maximum possible value. | number / null | null |
The HSInputNumber object is contained within the global window object.
METHOD | DESCRIPTION |
|---|---|
HSInputNumber.getInstance(target, isInstance) | Returns the element associated to the target.
|
METHOD | DESCRIPTION | RETURNING VALUE |
|---|---|---|
on:change | Called when input value is changed. | Current value. |
Assign an ID to the data-input-number in the events. Increment the number and check the output in the console.
<div class="input-group max-w-sm" data-input-number id="input-number">
<input class="input" type="text" value="1" aria-label="number input" data-input-number-input />
<span class="input-group-text gap-3">
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Decrement button" data-input-number-decrement>
<span class="icon-[tabler--minus] size-3.5 flex-shrink-0"></span>
</button>
<button type="button" class="btn btn-primary btn-soft size-[22px] rounded min-h-0 p-0" aria-label="Increment button" data-input-number-increment>
<span class="icon-[tabler--plus] size-3.5 flex-shrink-0"></span>
</button>
</span>
</div><script>
window.addEventListener('load', function () {
const el = HSInputNumber.getInstance('#input-number')
el.on('change', ({ inputValue }) => {
console.log('Changed to:', inputValue)
})
})
</script>Open any accordion event example.
const el = HSInputNumber.getInstance('#input-number');
el.on('change', ({inputValue}) => {console.log('Changed to:', inputValue)});
