Internationalisation

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",
    // Aria label for the selected country element
    selectedCountryAriaLabel: "Ausgewähltes Land",
    // Screen reader text for when no country is selected
    noCountrySelected: "Kein Land ausgewählt",
    // Aria label for the country list element
    countryListAriaLabel: "Liste der Länder",
    // Placeholder for the search input in the dropdown (when countrySearch enabled)
    searchPlaceholder: "Suchen",
    // Screen reader text for when the search produces no results
    zeroSearchResults: "Keine Suchergebnisse",
    // Screen reader text for when the search produces 1 result
    oneSearchResult: "1 Suchergebnis",
    // Screen reader text for when the search produces multiple results, where ${count} will be replaced by the count
    multipleSearchResults: "${count} Suchergebnisse",
  },
  onlyCountries: ["fr", "de", "es", "it", "ch", "nl", "at", "dk"],
  initialCountry: "de",
  utilsScript: "/intl-tel-input/js/utils.js?1711489147110" // just for formatting/placeholders etc
});