Tailwind CSS Input Number
The Input Number component, also known as the Quantity Selector, is designed for instances where users need to specify quantities. It's ideal for selecting the number of products before adding to a cart or choosing seat numbers on a pricing page. With user-friendly increment and decrement controls, this component makes numerical data entry straightforward and efficient in ecommerce and various other applications.
Requires JS
Note that this component requires the use of our Input Number plugin, else you can skip this message if you are already using Preline UI as a package.
Default controls
Use standard decrement and increment buttons alongside a numeric input field.
Labeled input style
Add supporting label text and rounded controls for a more form-like input number layout.
Seat quantity selector
Pair the control with pricing copy for seat counts or plan add-ons.
Disabled buttons
Disable the increment and decrement buttons while leaving the current value visible.
Custom step size
Set a custom step size so each button press increases or decreases the value by 2.
Maximum limit
Set an upper limit with the max option. In this example, the maximum value is 10.
Validation states
Use validation styles to communicate whether the current numeric value is valid.
Destroy and reinitialize
Use the destroy method before reinitializing the component when the input number needs to be rebuilt.