jackocnr/intl-tel-input
Intl Tel Input
intl-tel-input is an international telephone input widget that provides a country-aware phone number entry experience with automatic formatting, validation, and E.164 normalization. It combines a searchable country picker with a format-as-you-type engine and a validation rule engine that checks numbers against country-specific patterns, returning machine-readable error codes when a number is invalid.
The project ships as both a zero-dependency vanilla JavaScript library and as framework-specific components for React, Vue, Angular, and Svelte, all sharing the same core logic through a framework-agnostic adapter. It includes country-detection heuristics that combine IP geolocation and browser locale to preselect the user's country, and packs flag images, dial codes, and validation patterns for all countries into a single lightweight metadata bundle.
The widget supports country restriction to limit the dropdown to a custom list, digit input restriction to prevent invalid characters, and number type restriction for filtering valid number types. It provides E.164 number extraction for clean API-ready output, and offers full visual customization through CSS custom properties for colors, borders, and spacing. The interface is localized into 54 languages with right-to-left script adaptation.
Features
- International Phone Number Libraries - Provides a complete international phone number input with country selection, formatting, and validation.
- Format-As-You-Type Engines - Applies country-specific spacing and punctuation rules to digits as the user types, using a state machine.
- Phone Number Validation - Validates phone numbers against country-specific patterns and returns machine-readable error codes.
- Validation Rule Engines - Checks phone numbers against country-specific length and digit-pattern rules, returning boolean or error codes.
- Framework Agnostic Interfaces - Exposes the same core logic through vanilla JS and framework-specific wrappers for React, Vue, Angular, and Svelte.
- Searchable Country Pickers - Provides a searchable country picker with flags and dial codes for quick country selection.
- Country Selection Dropdowns - Lets the user search or keyboard-navigate a list of countries to select the one whose phone numbering plan applies.
- Telephone Input Fields - Provides a form control for selecting a country and entering a phone number with automatic formatting and validation.
- Phone Number Formatting - Applies local formatting rules to phone numbers as the user types in E.164, international, or national format.
- E.164 Standardization - Converts user-entered phone numbers into the standard E.164 format for storage or API transmission.
- Country-Aware Inputs - Detects the user's country and applies the correct dial code and formatting rules automatically.
- Vanilla JS Library Integrations - Provides a zero-dependency vanilla JavaScript library for international telephone input without requiring a framework.
- Searchable Country Pickers - Filters the country dropdown in real time as the user types a country name, dial code, or ISO code.
- Framework Component Adapters - Ships framework-specific component wrappers for React, Vue, Angular, and Svelte with lifecycle and binding support.
- Frontend Framework Integrations - Ships framework-specific components for React, Vue, Angular, and Svelte with lifecycle management.
- Browser-Based Country Detections - Infers the visitor's country from their browser or network and preselects it in the country picker.
- Browser-Based Country Detections - Combines IP geolocation and browser locale to automatically preselect the user's country on page load.
- Country Name Translations - Translates country names and UI strings into dozens of languages for localized country selection.
- Machine-Readable Error Codes - Returns machine-readable error codes when phone number validation fails for custom error handling.
- Country Metadata Bundles - Packs flag images, dial codes, and validation patterns for all countries into a single lightweight data structure.
- CSS Variable Customization - Overrides design tokens such as colors through CSS variables to match a dark mode or brand theme.
- CSS Variable Theming - Allows full visual customization by overriding CSS custom properties for colors, borders, and spacing.
- Interface Localization - Translates labels and placeholders into 54 languages with right-to-left script adaptation.
- Digit Input Restrictions - Prevents the user from typing characters that are not part of a valid phone number for the selected country.
- Multi-Framework Components - Ships as vanilla JavaScript and as React, Vue, Angular, and Svelte components sharing the same core logic.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
