1. Components
  2. Input Number

Advanced Forms

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 e-commerce 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.

Learn more

Basic usage

Example

Basic example with input number.

Input style

Basic input style example.

Select quantity

Buttons vertically stacked

Buttons vertically stacked.

Select quantity

Buttons horizontally stacked

Buttons horizontally stacked.

Mini

Basic Mini example.

Pricing seats example

Basic Pricing seats example.

Additional seats $39 monthly

Input disabled

Add the disabled boolean attribute on an input to remove pointer events, and prevent focusing.

Button disabled

Button disabled example.

Step Controls

Add incremental/decremental steps values. This example sets the step value to 2

Negative value

Set negative value with min option.

Maximum value

Set the maximum value with the max option. n this example, the maximum value is set to 10.

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Out of limit

Destroy and Reinitialize New

Provides destroy method that helps to destroy an input number.