International Telephone Input
🎉 NEWS: we now have our own React component! Play with it on Storybook! 🎉
A JavaScript plugin for entering and validating international telephone numbers. It takes a regular input field, adds a searchable country dropdown, auto-detects the user's country, displays a relevant placeholder number, formats the number as you type, and provides comprehensive validation methods.
Demo
Sponsored by
![Twilio logo](img/twilio.png)
Use Twilio's API to build phone verification, SMS 2FA, appointment reminders, marketing notifications and so much more. We can't wait to see what you build.
Features
- Automatically select the user's current country using an IP lookup
- Automatically set the input placeholder to an example number for the selected country
- Navigate the country dropdown by typing a country's name, or using up/down keys
- Automatically format the number as the user types
- Optionally only allow numeric characters and cap the number at the maximum valid length
- The user types their national number and the plugin gives you the full standardized international number
- Number validation, including specific error types
- High-resolution flag images
- Accessibility provided via ARIA tags
- Typescript type definitions provided
- Easily customise styles by overriding CSS variables
- React component included
- Translations for country names (etc) provided in many different languages
- Lots of initialisation options for customisation, as well as public methods/events for interaction
Docs
For full documentation, including Getting Started, Initialisation Options, Instance Methods, Custom Events, and more, please see the readme.