DEV Community

Cover image for Open-source number input component examples with Tailwind CSS
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at

Open-source number input component examples with Tailwind CSS

Hey everyone,

In this article I'll show you a collection of number input components coded with Tailwind CSS that you can use in your project to allow users to introduce all type of number formats with these examples, such as ZIP code addresses, credit card details, currency conversions, phone numbers, and more.

Before getting started, make sure that you have both Tailwind CSS and Flowbite installed in your project so that the rendered HTML and JS will be functional.

Without further ado, let's get into these UI component examples!

Tailwind CSS Number Input

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.

ZIP code input field

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.

Tailwind CSS ZIP code - Flowbite

Phone number field

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.

Tailwind CSS Phone number input field - Flowbite

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

Tailwind CSS Control buttons number input - Flowbite

Control buttons with icon

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

Control buttons with icon - Flowbite

Counter input

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

Tailwind CSS Counter Input - Flowbite

Currency input

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

Tailwind CSS Currency Input - Flowbite

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.

Tailwind CSS Credit Card Input - Flowbite

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.

Tailwind CSS Pin Code Input - Flowbite

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.

Tailwind CSS Number Input with Slider

Convert currency

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

Tailwind CSS Convert Currency - Flowbite

JavaScript behaviour

You can check out the Flowbite JS API examples to learn how to programmatically work with the number input fields with JavaScript too.


These components could not have been created without the following open-source UI resources and components:

Top comments (0)