Advanced forms
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.
Basic example
Default
Basic example of 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 — Maximum value
You can control the minimum value with `":min"` and set the maximum value with `":max"`.
Min/Max value — Negative value
In the example below, the minimum number that can be selected is `-15`.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a input number.
JavaScript behavior
Events — Event usage
METHOD| DESCRIPTION | RETURNING VALUE `on:change`|Called when input value is changed.| Current value.
JavaScript
const el = HSInputNumber.getInstance('#input-number');
el.on('change', ({inputValue}) => {console.log('Changed to:', inputValue)});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
input | component | Basic input field. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
input-number-disabled:{tw-utility-class} | variant | The modifier allows setting Tailwind classes when input's value is set to zero. |