Display existing number

Overview

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.

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

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

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