jackocnr/intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.

Summary

intl-tel-input is a JavaScript plugin for entering, formatting, and validating international telephone numbers on web forms. It ships as a vanilla JavaScript library and as wrappers for React, Vue, Angular, and Svelte, so the same component fits most front-end stacks. Formatting and validation rules come from Google's libphonenumber project.

What it is useful for

The plugin handles the common case of a phone field on a signup, checkout, or contact form where a country dropdown, dial codes, and confidence that the submitted number is real are needed. It provides a searchable country picker (by name or dial code), automatic country detection for the current user, and per-country example placeholders so users see the expected shape. As the user types, the value is formatted; on submit, the library can return a standard E.164 string suitable for storage or for handing to an SMS provider. Validation reports specific error types rather than a single boolean, and the input only accepts valid digits up to the country's maximum length.

It also covers accessibility and internationalization: full keyboard navigation, screen-reader-friendly ARIA markup, translations in 50+ languages, and support for RTL layouts and alternative numerals. Styling is done with CSS variables or utility classes such as Tailwind, so the same component works in light or dark UIs without forking the source.

How engineers can use it

The README does not include install commands; it points to the integration docs at intl-tel-input.com/docs/integrations for framework-specific setup, since installation differs between the vanilla JS bundle and each component wrapper. TypeScript definitions are included, so consumer code gets type checking for options and the E.164 output. A live playground and a vanilla JavaScript validation example are linked from the project site for trying options interactively.

For projects with older browser support requirements, the documented limitation is browser coverage: Chrome/Edge 93+, Safari 15.4+, and Firefox 92+, which roughly matches browsers released since early 2022. The FAQ at intl-tel-input.com/docs/faq#which-browsers-are-supported addresses older targets. The library is MIT-licensed. For working on intl-tel-input itself, the contributing guide in the repository's .github folder covers building the project, updating the country flag images, and adding new translations.