Open-source phone input components coded with Tailwind CSS
Tags: tailwindcss, flowbite, opensource, webdev
Published: 2023-11-28 09:50:05

Hey developers!

In this article I would like to show you a collection of open-source UI [phone input UI components](https://flowbite.com/docs/forms/phone-input/) coded with Tailwind CSS and Flowbite that you can use to introduce phone numbers and send SMS and call messages to users for authentication and verification.

It is a very commonly used component on e-commerce websites and it can really help you validate phone numbers based on location and region.

The technologies that you need to have installed in your project are Tailwind CSS and Flowbite. You need Tailwind CSS for the utility classes and Flowbite for the JS interactivity, such as for the dropdowns when selecting the country code.

So without further ado, let me show you the examples!

## Tailwind CSS Phone Input

The phone number input component from Flowbite can be used to set a phone number inside a form field by using the native type="tel" attribute and also use a dropdown menu to select the country code.

The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.

### Default phone input

Use this component to set a phone number inside an input field by setting the type="tel" attribute.

[![Tailwind CSS Phone Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3ofsl3t3eb48tu2zoz5.png)](https://flowbite.com/docs/forms/phone-input/#default-phone-input)

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

### Phone input country code

This example can be used to select the country code from a dropdown menu and set the phone number inside an input field and use the pattern attribute to validate the phone number.

[![Tailwind CSS Phone Input Country Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jbftfaahosfbjs9x5p7.png)](https://flowbite.com/docs/forms/phone-input/#phone-input-country-code)

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

### Floating label input

Set a phone number inside an input field with a floating label inspired by Material UI from Google.

[![Tailwind CSS Floating Label Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl3jd6s70ivnk8hmk8e6.png)
](https://flowbite.com/docs/forms/phone-input/#floating-label-input)

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

### Verification code input

Use this example to send a verification code to the user’s phone number for authentication.

[![Tailwind CSS Phone Input Verification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78012r632plsop73eq7v.png)](https://flowbite.com/docs/forms/phone-input/#verification-code-input)

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

### Authentication form

Use this example to select one of your saved phone numbers from an application with a copy-paste feature.

[![Tailwind CSS Phone Authentication Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps0lp4nsh4f0muoi7bi5.png)](https://flowbite.com/docs/forms/phone-input/#authentication-form)

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

### Advanced phone verification

Use this example to verify a phone number via SMS or phone call using a dropdown component.

[![Tailwind CSS Advanced Phone Verification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqystjdin57thssw1o9o.png)](https://flowbite.com/docs/forms/phone-input/#advanced-phone-verification)

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

### Credits

These examples couldn't have been made without the following awesome and open-source resources:

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