jackocnr/intl-tel-input

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