Display existing number

Overview

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 library. The library will automatically select the relevant flag and reformat the number.

Note: reformatting the number this way requires the utils script to be loaded. 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 library options on an input containing a number in the Playground.

Note: the toast shown when input is rejected isn't part of the library — see the strict:reject event docs for an example of how to wire one up yourself.

Html

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

JavaScript

import intlTelInput from "intl-tel-input";

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