Open-source phone input components coded with Tailwind CSS
Zoltán Szőgyényi
Posted on November 28, 2023
Hey developers!
In this article I would like to show you a collection of open-source UI phone input UI components 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.
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.
Floating label input
Set a phone number inside an input field with a floating label inspired by Material UI from Google.
Verification code input
Use this example to send a verification code to the user’s phone number for authentication.
Authentication form
Use this example to select one of your saved phone numbers from an application with a copy-paste feature.
Advanced phone verification
Use this example to verify a phone number via SMS or phone call using a dropdown component.
Credits
These examples couldn't have been made without the following awesome and open-source resources:
Posted on November 28, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
