Display existing number

When you want to display a user's number back to them, set the initialValue prop to the full international number. 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

<script>
  import IntlTelInput from "intl-tel-input/svelte";
  import "intl-tel-input/styles";
</script>

<label for="phone">Phone number</label>
<IntlTelInput
  separateDialCode={true}
  initialValue="+447733312345"
  loadUtils={() => import("intl-tel-input/utils")}
  inputProps={{ id: "phone" }}
/>