# International Telephone Input: handling phone numbers across borders in web forms > A TypeScript library that handles the mechanics of international phone numbers: country detection, validation against real patterns, and consistent formatting. Ships as vanilla JavaScript or framework components for React, Vue, Angular, and Svelte. **jackocnr/intl-tel-input** — For entering, formatting, and validating international telephone numbers. Available in vanilla JavaScript, or as React, Vue, Angular, and Svelte components. - Repository: https://github.com/jackocnr/intl-tel-input - Website: https://intl-tel-input.com - Stars: 8,260 · Forks: 1,991 - Language: TypeScript - License: MIT - Published: 2026-09-22 · Updated: 2026-09-22 · Language: en - Canonical page: https://hysenlabs.com/projects/jackocnr-intl-tel-input ## The problem: phone numbers have no universal format Phone numbers break basic web form assumptions. A US number might be 10 digits, UK numbers 11, Japan 11, Brazil 11, and a few countries use 12 or more. The digit composition itself differs: some countries accept +555-1234, others require +555.1234 or a plain string of digits. No single regex can validate all of them. A form that accepts input but silently drops leading zeros, strips dashes, or misses country context will accept invalid numbers silently and send them to backend systems that cannot use them. International Telephone Input solves this by tying validation to the Google libphonenumber library, which encodes the actual patterns that each country's telecom uses. ## How it detects, picks and validates countries The library ships with a searchable dropdown that lists all countries with their dial codes. Typing starts a filter: users can search by country name (type "United") or dial code (type "+1" or "1"). The picker supports full keyboard navigation, closing the dropdown on escape, and auto-detection of the user's country based on browser locale or IP geolocation if you wire it in. When the user selects a country or types a number, the library applies that country's validation rules. The input enforces a maximum length specific to that country, allowing only digits that the country's patterns would accept. When you request validation, it returns one of several states: valid, invalid (the string does not match this country's patterns), too short, too long, or invalid for the country dialed into. This specificity matters because a number valid for USA is not valid for UK, and a form that does not distinguish tells the user they got it wrong without saying which country's rules they violated. ## Formatting and output in E.164 format As the user types, the library formats the number according to that country's conventions. If the user types digits into a US field, it formats them as (555) 123-4567. The README does not specify how many formatting rules it covers, but the libphonenumber library (which it uses for validation) encodes the formatting conventions for every country. The library exports the final number in E.164 format (the international standard: +15551234567), which you store in your database. This means your backend receives a number in a known format regardless of how the user typed it or which country they selected. ## npm Packages and the intl-tel-input Monorepo The library publishes to npm as a monorepo with separate packages for each integration. The project maintains official wrappers for vanilla JavaScript, React, Vue, Angular, and Svelte. The README does not include installation code but points to the project website at intl-tel-input.com for a full set of documentation and live playground where you can try all options. Examples of different setups are available at intl-tel-input.com/examples, covering vanilla JavaScript, React, and other frameworks. The README mentions that the library accepts options for initialCountry, preferredCountries, onlyCountries, and i18n to override default settings. ## Framework-specific wrappers: React, Vue, Angular, Svelte The project maintains official wrappers for React, Vue, Angular, and Svelte as separate packages. These wrappers pass all the same options and emit the same validation methods as the core library. The React wrapper, for example, accepts callbacks for country changes and validity updates so you can react to user selections in your state management. The Vue wrapper ships as a single-file component. All four wrappers delegate to the same underlying libphonenumber library, so validation behavior is identical across frameworks. Each wrapper is published as a separate npm package (intl-tel-input-react, intl-tel-input-vue, etc.). ## Keyboard navigation and accessibility support The country picker supports full keyboard navigation: arrow keys to move between countries, Enter to select, Escape to close. The DOM includes ARIA labels and roles so screen readers announce the current country and the selected phone number's validity state. The README states that the library supports RTL (right-to-left) text direction and alternative numerals (e.g., Farsi or Arabic numerals), which expands usability beyond English-speaking regions. Themes use CSS variables so you can style the picker to match your design system using dark mode overrides or Tailwind utility classes. ## What format validation covers and what it does not The library validates format only, not whether a number is actually assigned or in use. A number can pass validation and still reach a disconnected phone or inactive plan. The README includes translations into 50+ languages but does not detail which languages are incomplete. If you need SMS 2FA or call verification, you must integrate with a service like Twilio; the library formats and validates but does not send anything. The library also does not attempt to detect spam or fraud patterns. It delegates country and carrier information to libphonenumber, so if libphonenumber's metadata falls behind a country's actual telecom numbering plan, so will this library. Validation is only as current as the underlying libphonenumber data. ## Using Twilio or other services for verification If your application needs to verify that a phone number is real and reachable, or needs to send SMS or make calls, use Twilio, Vonage, or another telecom API instead. These services handle validation plus delivery in one package. intl-tel-input is the right choice if you want validation and formatting without platform dependency; Twilio is the right choice if you want verification or sending built in. The project README itself notes sponsorship from Twilio and suggests using both: International Telephone Input for the user-facing form, and Twilio for backend verification. ## Conclusion Adopt this if your form needs reliable international phone handling: auto-detection of country context, real validation tied to country patterns, and a keyboard-navigable country picker that does not obscure the number field. Skip it if your application collects phone numbers as unstructured text. Start by testing the live playground at intl-tel-input.com/playground/ to verify the validation rules match your target regions. ## FAQ ### How do I use intl tel input in React? The project maintains an official React wrapper package. The website at intl-tel-input.com/docs/integrations provides installation and usage instructions. The React wrapper passes the same validation options and methods as the core library. ### What is intl tel input? It is a TypeScript library for phone number input fields that validates numbers against each country's patterns, formats them as the user types, and includes a searchable dropdown for country selection. It ships as vanilla JavaScript or as components for React, Vue, Angular, and Svelte. ### How do I know my international phone number? Your international phone number starts with a plus sign and your country's dial code, followed by your local number. For example, a US number might be +1-555-123-4567. The library shows you the format for your country in its dropdown and exports the number in E.164 format (+15551234567) when you query it. ### What input type is used for phone numbers? HTML forms use the tel input type (e.g., ), which tells browsers to show a phone keypad on mobile. International Telephone Input wraps a tel input and adds validation and formatting on top of it. ### How do I convert my phone number to international format? The library converts phone numbers automatically as you type. When you query the library for the formatted number, it returns the number in the standard E.164 format (e.g., +15551234567) ready to store or send. ## Sources - [jackocnr/intl-tel-input on GitHub](https://github.com/jackocnr/intl-tel-input) - [License: MIT](https://github.com/jackocnr/intl-tel-input/blob/master/LICENSE) - [Project website](https://intl-tel-input.com) - [README](https://github.com/jackocnr/intl-tel-input/blob/master/README.md) - [Releases](https://github.com/jackocnr/intl-tel-input/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jackocnr-intl-tel-input