Only countries option

In some cases, you may not want to show every single country in the dropdown (over 200 in total). For example, if your business only delivers products to Europe, you may only want to show European countries. In this case, International Telephone Input provides the onlyCountries option to specify which countries you want to show. This option accepts an array of iso2 country codes, which you can find online, or by referencing the data.js file included in the plugin code. Note that the countries will always be sorted by name in the dropdown. Alternatively, if you want to include all countries except a specific few, you can use the excludeCountries option to specify which countries you want to exclude from the dropdown. Play with this option on Storybook (using the React component).

Markup

<input id="phone" type="tel">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk",
  "ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
  "li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
  "ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855") // for formatting/placeholders etc
});