repository·master·Indexed 27 days ago
https://github.com/jackocnr/intl-tel-inputA comprehensive library for entering, formatting, and validating international telephone numbers. It features a user interface for country selection via name or dial code and supports auto-detecting the user's country. Available as a vanilla JavaScript library and as official framework wrappers for React (@intl-tel-input/react), Vue (@intl-tel-input/vue), Angular, and Svelte (@intl-tel-input/svelte).
You can integrate intl-tel-input into your project using either the vanilla JavaScript library or dedicated framework components. Both options use the same core engine providing country selection, formatting, and validation.
Use this if you are not using a frontend framework or prefer to manage the DOM manually. It is lightweight and has zero dependencies.
Use these if you are using React, Vue, Angular, or Svelte. The components automate lifecycle management, two-way data binding, and provide typed change callbacks.
@intl-tel-input/react package provides a React component for entering, formatting, and validating international telephone numbers. For full documentation, a live playground to test options, and various setup examples, visit the official intl-tel-input website.@intl-tel-input/vue package provides a Vue component for entering, formatting, and validating international telephone numbers. For detailed configuration options and API usage, refer to the official documentation.@intl-tel-input/svelte package provides a Svelte component for entering, formatting, and validating international telephone numbers. For full documentation, a live playground to test options, and specific implementation examples (such as validation setups), visit the official intl-tel-input documentation.The library automatically supports RTL layouts if the dir="rtl" attribute is set on the <html> element or any of its ancestors.
Note that while the layout flows right-to-left, phone numbers and dial codes are displayed left-to-right to follow standard telephone number formatting.
To use the intl-tel-input component in a Vue application, install the package via npm and import both the component and its required styles.
To avoid bloating your initial bundle, it is recommended to load the utils script (approx. 260KB) using a dynamic import via the load-utils prop. Alternatively, you can import from @intl-tel-input/vue/with-utils to bundle the utils directly if the component itself is already being lazy-loaded.
npm install @intl-tel-input/vue<script setup>
import IntlTelInput from "@intl-tel-input/vue";
import "intl-tel-input/styles";
</script>
<template>
<IntlTelInput
initial-country="us"
:load-utils="() => import('intl-tel-input/utils')"
/>
</template>To use the library with a modern bundler like Vite or Webpack, install the package via npm and import both the JavaScript and CSS. It is recommended to use the loadUtils option with a dynamic import to lazy-load the utils script (~260KB) so it doesn't increase your initial bundle size.
npm install intl-tel-inputimport intlTelInput from "intl-tel-input";
import "intl-tel-input/styles";
const input = document.querySelector("#phone");
intlTelInput(input, {
loadUtils: () => import("intl-tel-input/utils"),
});For a quick start without a build step, load the CSS and the minified JavaScript directly from a CDN like jsDelivr. You must also provide a loadUtils function to handle the utility script required for formatting and validation.
<!-- Add the CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/css/intlTelInput.css">
<!-- Add the script and initialise -->
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/intlTelInput.min.js"></script>
<script>
const input = document.querySelector("#phone");
window.intlTelInput(input, {
loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/utils.js"),
});
</script>To use the intl-tel-input component in a Svelte 5 project, install the package via npm and import both the component and the required styles.
It is recommended to use a dynamic import for loadUtils to ensure the ~260KB utils script is lazy-loaded and doesn't bloat your initial bundle. Alternatively, you can import from @intl-tel-input/svelte/with-utils to bundle the utils directly with the component.
npm install @intl-tel-input/svelte<script>
import IntlTelInput from "@intl-tel-input/svelte";
import "intl-tel-input/styles";
</script>
<IntlTelInput
initialCountry="us"
loadUtils={() => import("intl-tel-input/utils")}
/>The utils script is required if you want to use advanced features such as:
If you only need basic flag selection and input, you can omit it.
To run the documentation website locally for development or testing, follow these steps:
npm install in the root of the intl-tel-input project.site/ directory and run npm run build.site/dist/ directory and start a web server (e.g., using http-server).If you do not have http-server installed, you can install it globally via npm install -g http-server.