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
});