• advanced forms
  • Input Number

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.

Require FlyonUI JS
Class Name
Type
Description
inputComponentBasic input field.
is-validStateAdds success style to the input.
is-invalidStateAdds error style to the input.
input-number-disabled:{tw-utility-class}VariantThe modifier allows setting Tailwind classes when input’s value is set to zero.

Basic example

Default

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.

Label

Input number with label.

Validation states

Success state

Success state can be show using is-valid class.

Error state

Error state can be show using is-invalid class.

Illustrations

Disabled

Basic disabled state.

Vertically stacked buttons

Vertically stacked buttons example.

Horizontally stacked buttons

Horizontally stacked buttons example.

Horizontally stretched buttons.

Horizontally stretched buttons example.

Mini

Here’s a simple example: demonstrate setting a maximum width for the main container.

Booking

Here’s an example of a movie ticket booking number counter.

Step controls

Increase or decrease values in steps. This example uses a ":step" value of 5.

Min/Max value

You can control the minimum value with ":min" and set the maximum value with ":max".

Maximum value

In the example below, the maximum number that can be selected is 15.

Negative value

In the example below, the minimum number that can be selected is -15.

Destroy/Reinitialize

The destroy method is provided to facilitate the destruction of a input number.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-input-numberActivate an Input Number by specifying on an element.--
data-input-number-inputApplied to the input element.--
data-input-number-incrementApplied to the increment button.--
data-input-number-decrementApplied to the decrement button.--
:stepDetermines the step by which the value will increase or decrease.number1
:minDefines the minimum value that can be entered. Setting it to -Infinity allows unrestricted negative values.number /
“-Infinity”		0
:maxmax Defines the maximum possible value.number / nullnull

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.

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

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:changeCalled when input value is changed.Current value.

Event usage

Assign an ID to the data-input-number in the events. Increment the number and check the output in the console.

Open any accordion event example.

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

el.on('change', ({inputValue}) => {console.log('Changed to:', inputValue)});