Multiple instances - Vanilla JavaScript example - International Telephone Input

Overview

If you have multiple telephone inputs on the same page, it is safe to initialise the library on each of them individually in your JavaScript. You can use different initialisation options in each case — in the demo below, we specify different placeholderNumberType values for each of the first two instances. We also specify onlyCountries on the third instance, limiting its country selector to three countries, without affecting the first two.

Play with these options in the Playground.

Note: if you use loadUtils or initialCountryLookup across multiple instances, those requests are only fired once and the result is shared between them.

Note: the toast shown when input is rejected isn't part of the library — see the strict:reject event docs for an example of how to wire one up yourself.

Demo

Html

<input id="home" type="tel">
<input id="mobile" type="tel">
<input id="vacation" type="tel">

JavaScript

initialCountryLookup here uses ipapi's free tier. For production, swap for a paid plan or alternative - see docs.

import intlTelInput from "intl-tel-input";

const inputHome = document.querySelector("#home");
const inputMobile = document.querySelector("#mobile");
const inputVacation = document.querySelector("#vacation");

const initialCountryLookup = async () => {
  const res = await fetch("https://ipapi.co/json");
  const data = await res.json();
  return data.country_code;
};

// initialise library - home
intlTelInput(inputHome, {
  initialCountryLookup,
  placeholderNumberType: "FIXED_LINE",
  loadUtils: () => import("intl-tel-input/utils"),
});

// initialise library - mobile
intlTelInput(inputMobile, {
  initialCountryLookup,
  placeholderNumberType: "MOBILE",
  loadUtils: () => import("intl-tel-input/utils"),
});

// initialise library - vacation
intlTelInput(inputVacation, {
  initialCountry: "es",
  onlyCountries: ["es", "fr", "it"],
  loadUtils: () => import("intl-tel-input/utils"),
});