Display existing number

When you want to display a user's number back to them, set the input's value to the full international number before you initialise the plugin. The plugin will automatically select the relevant flag and reformat the number to national format (unless you set nationalMode to false).

We recommend that internally you always deal with numbers in full international format. The plugin then lets the user interact with the familiar national format.

Note: reformatting the number 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, which we use for all formatting, validation, and placeholder generation.

Play with the various plugin options on an input containing a number in the Playground.

Html

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

JavaScript

import intlTelInput from "intl-tel-input";

const input = document.querySelector("#phone");
intlTelInput(input, {
  separateDialCode: true,
  strictMode: true,
  strictRejectAnimation: true,
  loadUtils: () => import("intl-tel-input/utils"),
});