Display existing number

Overview

When you want to display a user's number back to them, set the initial-value 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 strict-reject event docs for an example of how to wire one up yourself.

JavaScript

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

<template>
  <label for="phone">Phone number</label>
  <IntlTelInput
    initial-value="+447733312345"
    :load-utils="() => import('intl-tel-input/utils')"
    :input-props="{ id: 'phone' }"
  />
</template>