International Telephone Input
What is it?
A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
Demo
Sponsored by
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
- Handle phone number extensions
- The user types their national number and the plugin gives you the full standardized international number
- Full validation, including specific error types
- Retina flag icons
- Lots of initialisation options for customisation, as well as public methods for interaction
Examples
- Validation: Use Google's libphonenumber for validation
- Lookup user's country: Use IP address lookup to set the default country to the user's country
- National mode: Use nationalMode option, but still extract full international numbers
- Country sync: Access the country data to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync
- European countries: Only show European country codes
- Modify country data: Modify the data to only show localised country names
- Hidden input: Submitting the full international number when in nationalMode
- Initialisation promise: Know when the plugin has finished initialising
- Display an existing number: The plugin will automatically select the right flag and format the number
- Multiple instances: Use the plugin multiple times on the same page
- Large flags: Build the plugin with extra large flags!
