Tailwind CSS Number Input - Flowbite

The number input component from Flowbite can be used to introduce numeric values inside a form such as for a quantity field, a ZIP code, a phone number, your credit card number, and more. All of the UI components are coded exclusively with Tailwind CSS.

The examples on this page have basic functionality coded with JavaScript and the quantity input has a more advanced ability to increment and decrement the value with the help of the data-input-counter attribute from the Flowbite JS API.

Default number input #

Use this component to set a number value inside a form field by applying the type="number" attribute.

ZIP code input #

Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the pattern attribute to validate the input using a regular expression for a 5 digit number.

Phone number #

Use this example to set a phone number inside a form field based on the type="phone" attribute and a dropdown menu to select the country code.

Control buttons #

Use this example with control buttons to increment and decrement the value inside the input field.

If you have the Flowbite JS installed in your project then you can use the data-input-counter data attribute to initialize the target input field and then use the following data attributes to target the buttons that will increment and decrement the value of the input field:

• data-input-counter - initialize the input field
• data-input-counter-increment - increment the value of the input field
• data-input-counter-decrement - decrement the value of the input field

Control buttons with icon #

Use this example to also add an icon inside the input field to improve the user experience.

Counter input #

Use this example as an alternative style to the control buttons example above.

Currency input #

This component can be used to set a currency value inside a form field when you need to set a price.

Credit card input #

Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the Flowbite Datepicker.

Pin code input #

Use this example of a pin code input to set a 6 digit code. This can be used when setting up a new account or when making a payment and the code is sent via phone or email.

Number input with slider #

This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the Flowbite Range Slider.

Convert currency #

Use this example of two number input fields and dropdowns to convert currency and even from fiat to crypto.

Advanced control buttons #

This example can be used to add multiple number input fields with quantity selectors and control buttons to use for E-commerce UI similar to projects like AirBnb or Booking.

Min and max values #

By using the InputCounter object from the Flowbite JS API, you ca set the min and max values of a number input component by using the following data attributes:

• data-input-counter-min - set the minimum value of the input
• data-input-counter-max - set the maximum value of the input

These values will be enforced and validated whenever the user clicks on one of the buttons or tries to introduce the value manually.

JavaScript behaviour #

Use the InputCounter object from the Flowbite JS API to create a number input component with increment and decrement buttons that can be used to increase or decrease the value of the input.

Object parameters #

Use the object parameters from the InputCounter object to set the target, increment, and decrement elements as well as the options object.

Options #

Use these optional options for the InputCounter object to set the minimum and maximum values of the input field and also to set callback functions for the increment and decrement events.

Methods #

Use the following methods of the InputCounter object to programmatically manipulate the behaviour of the input field.

Example #

Check out the following examples to learn how to create a new InputCounter object and how to set it up with custom options and programmatically use the methods available.

First of all, you need to set the object parameters where the target element is required and the other two are optional.

Next step is to create a new instance of a InputCounter object using the parameters we have set above.

Now you can programmatically increment or decrement the input field using the methods of the InputCounter object.

HTML Markup #

Here is an example of the HTML markup that you can use for the JavaScript example above.

TypeScript #

If you’re using the TypeScript configuration from Flowbite then you can import the types for the InputCounter object, parameters and its options.

Here’s an example that applies the types from Flowbite to the code above: