A JavaScript plugin for entering, formatting and validating international telephone numbers. Includes React, Vue, Angular and Svelte components, plus TypeScript definitions.
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.
We provide React, Vue, Angular and Svelte (beta) components alongside the regular JavaScript plugin. This readme is for the JavaScript plugin. View the React Component, the Vue Component the Angular Component, or the Svelte component.
We have a newly updated website, where you can find a full set of docs, a live playground where you can try out all of the options, as well as plenty of examples of different setups.
🔍 Fast country picking
- Search by country name or dial code
- Full keyboard navigation
✨ Smart defaults
- Optionally auto-detect the user's country via IP lookup
- Example placeholders per country
📞 Formatting & output
- Formats the number as the user types
- Extract standard E.164 numbers to store
🛡️ Validation
- Validate numbers with specific error types
- Strict mode: only allow valid digits and enforce max length
🌍 International & accessible
- Translated into 40+ languages, with support for RTL and alternative numerals
- Screen reader-friendly ARIA markup
🎛️ Customisable
- Override CSS variables (e.g. dark mode)
- Optionally display the dial code next to the number
- Extensive initialisation options, methods, and events
See the contributing guide for instructions on setting up the project and making changes, and also on how to update the flag images, or how to add a new translation.
- Flag images from flag-icons
- Original country data from mledoze's World countries in JSON, CSV and XML
- Formatting/validation/example number code from libphonenumber
User testing powered by BrowserStack Open-Source Program
Browser testing via 