Multiple instances

If you have multiple telephone inputs on the same page, it is safe to initialise International Telephone Input on each of them individually in your JavaScript. You can use different initialisation options in each case e.g. in the demo below, we specify different placeholderNumberType values for each of the first two instances. We also specify the onlyCountries option in the third instance, so that country dropdown only includes three countries, but this does not affect the first two instances. Note that if you use loadUtils or geoIpLookup options across multiple instances, those requests will only be fired once, and the result will be shared.

Markup

<table>
  <tr>
    <td>Home:</td>
    <td><input id="home" type="tel" /></td>
  </tr>
  <tr>
    <td>Mobile:</td>
    <td><input id="mobile" type="tel" /></td>
  </tr>
  <tr>
    <td>Vacation:</td>
    <td><input id="vacation" type="tel" /></td>
  </tr>
</table>

Code

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

window.intlTelInput(inputHome, {
  initialCountry: 'gb',
  placeholderNumberType: 'FIXED_LINE',
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855") // for formatting/placeholders etc
});
window.intlTelInput(inputMobile, {
  initialCountry: 'gb',
  placeholderNumberType: 'MOBILE',
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855"),
});
window.intlTelInput(inputVacation, {
  onlyCountries: ['es', 'fr', 'it'],
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855"),
});