Display existing number

Overview

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.

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.

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

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
      loadUtils={() => import("intl-tel-input/utils")}
      inputProps={{
        id: "phone",
        defaultValue: "+447733312345",
      }}
    />
  </>
);
export default App;