Localise country names

International Telephone Input supports internationalisation, allowing you to localise the country names in the dropdown as well as a few other strings used by the plugin. Using the i18n option, you can pass an object with one entry for each country, where the key is the country code, and the value is the localised country name. Additionally, you can pass a few other key names for other bits of text the plugin uses. This means that you're able to display the country names etc. in your user's language, which provides a much better user experience.

In the example below, we localise the country names etc. to German, as a demonstration. We also use the onlyCountries option to limit the countries to just the few that we have chosen to localise, whereas by default they would all be shown, localised or not. Play with this option on Storybook (using the React component).

Demo

Markup

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

Code

const input = document.querySelector("#phone");

window.intlTelInput(input, {
  i18n: {
    // Country names
    fr: "Frankreich",
    de: "Deutschland",
    es: "Spanien",
    it: "Italien",
    ch: "Schweiz",
    nl: "Niederlande",
    at: "Österreich",
    dk: "Dänemark",
    // Other plugin text
    selectedCountryAriaLabel: 'Ausgewähltes Land',
    countryListAriaLabel: 'Liste der Länder',
    searchPlaceholder: 'Suchen',
  },
  onlyCountries: ["fr", "de", "es", "it", "ch", "nl", "at", "dk"],
  utilsScript: "/intl-tel-input/js/utils.js?1708969428263" // just for formatting/placeholders etc
});