Display existing number

When you want to display a user's number back to them, pass the full international number as defaultValue via inputProps. The component 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 component 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.

JavaScript

import React from "react";
import IntlTelInput from "intl-tel-input/react";
import "intl-tel-input/styles";

const App = () => (
  <>
    <label htmlFor="phone">Phone number</label>
    <IntlTelInput
      separateDialCode
      loadUtils={() => import("intl-tel-input/utils")}
      inputProps={{
        id: "phone",
        defaultValue: "+447733312345",
      }}
    />
  </>
);
export default App;