Display existing number

When you want to display a user's number back to them, in your HTML you can just set the input's value to the full international number before you initialise International Telephone Input. The plugin will automatically select the relevant flag, and re-format the number to national format (unless you set nationalMode to false). We recommend that internally, you always deal with numbers in full international format, and then through the plugin, the user can always deal with numbers in the familiar national format. Note that reformating the number in this way requires the utils script to be loaded via the loadUtils option. The utils script is a custom build of Google's libphonenumber library in JavaScript, which we use for all formatting, validation and generating placeholder numbers. Play with this option on Storybook (using the React component).

Markup

<input id="phone" type="tel" value="+447733312345">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "us",
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855") // for formatting/placeholders etc
});