Multiple instances - JavaScript plugin example - International Telephone Input

If you have multiple telephone inputs on the same page, it is safe to initialise the plugin 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 dropdown to three countries, without affecting the first two.

Play with these options in the Playground.

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

Demo

Html

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

JavaScript

geoIpLookup here uses ipapi's limited free tier — for production, pick a paid plan, another provider, or roll your own.

import intlTelInput from "intl-tel-input";

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

const geoIpLookup = (success, failure) => {
  fetch("https://ipapi.co/json")
    .then(res => res.json())
    .then(data => success(data.country_code))
    .catch(() => failure());
};

const baseOptions = {
  separateDialCode: true,
  strictMode: true,
  strictRejectAnimation: true,
  loadUtils: () => import("intl-tel-input/utils"),
};

// initialise plugin - home
intlTelInput(inputHome, {
  ...baseOptions,
  initialCountry: "auto",
  geoIpLookup,
  placeholderNumberType: "FIXED_LINE",
});

// initialise plugin - mobile
intlTelInput(inputMobile, {
  ...baseOptions,
  initialCountry: "auto",
  geoIpLookup,
  placeholderNumberType: "MOBILE",
});

// initialise plugin - vacation
intlTelInput(inputVacation, {
  ...baseOptions,
  initialCountry: "es",
  onlyCountries: ["es", "fr", "it"],
});