Open-source number input component examples with Tailwind CSS
Tags: tailwindcss, flowbite, opensource, webdev
Published: 2023-11-22 10:46:50

Hey everyone,

In this article I'll show you a collection of [number input components coded with Tailwind CSS](https://flowbite.com/docs/forms/number-input/) 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](https://tailwindcss.com) and [Flowbite](https://flowbite.com) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3bpmogkpvvy473866j4.png)](https://flowbite.com/docs/forms/number-input/#zip-code-input)

- [View example and code](https://flowbite.com/docs/forms/number-input/#zip-code-input)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2rxas2cuj70qnkgwzf5.png)](https://flowbite.com/docs/forms/number-input/#phone-number)

- [View example and code](https://flowbite.com/docs/forms/number-input/#phone-number)

### 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](https://flowbite.com/docs/getting-started/quickstart/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37e5jhfgilszgsxaixvu.png)](https://flowbite.com/docs/forms/number-input/#control-buttons)

- [View example and code](https://flowbite.com/docs/forms/number-input/#control-buttons)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7c179560u9l6pxl6cut.png)](https://flowbite.com/docs/forms/number-input/#control-buttons-with-icon)

- [View example and code](https://flowbite.com/docs/forms/number-input/#control-buttons-with-icon)

### Counter input

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

[![Tailwind CSS Counter Input - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsawpsep0epeno5qzkv5.png)](https://flowbite.com/docs/forms/number-input/#counter-input)

- [View example and code](https://flowbite.com/docs/forms/number-input/#counter-input)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5qstug96q1pacnadqff.png)](https://flowbite.com/docs/forms/number-input/#currency-input)

- [View example and code](https://flowbite.com/docs/forms/number-input/#currency-input)

### 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](https://flowbite.com/docs/plugins/datepicker/).

[![Tailwind CSS Credit Card Input - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9v0s6w2tgyu0iiqlng3.png)](https://flowbite.com/docs/forms/number-input/#credit-card-input)

- [View example and code](https://flowbite.com/docs/forms/number-input/#credit-card-input)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr6r14914oejs3hgnqak.png)](https://flowbite.com/docs/forms/number-input/#pin-code-input)

- [View example and code](https://flowbite.com/docs/forms/number-input/#pin-code-input)

### 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](https://flowbite.com/docs/forms/range/).

[![Tailwind CSS Number Input with Slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4tzkhcoqiu3m3j01ro2.png)](https://flowbite.com/docs/forms/number-input/#number-input-with-slider)

- [View example and code](https://flowbite.com/docs/forms/number-input/#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m80xxab18qisruy1lozm.png)](https://flowbite.com/docs/forms/number-input/#convert-currency)

- [View example and code](https://flowbite.com/docs/forms/number-input/#convert-currency)

## JavaScript behaviour

You can check out the [Flowbite JS API](https://flowbite.com/docs/forms/number-input/#javascript-behaviour) examples to learn how to programmatically work with the number input fields with JavaScript too.

## Credits

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

- [Tailwind CSS](https://tailwindcss.com)
- [Flowbite](https://flowbite.com)
- [Flowbite Icons](https://flowbite.com/icons/)