1. Basic Forms
  2. Input Number

Components

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.

Attention needed

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.

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.

Validation states

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

Out of limit