Phone Input

Input phone number that format automatically.

Basic usage

List all countries

---

<template>
  <b-form-item topless :help-text="value" class="w-360px">
    <b-phone-input v-model="value" />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

Default country

Choose the default selected country

---

<template>
  <b-form-item topless :help-text="value" class="w-360px">
    <b-phone-input v-model="value" default-country-code="VN" />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

Only countries

Limit only specific countries

---

<template>
  <b-form-item topless :help-text="value" class="w-360px">
    <b-phone-input v-model="value" :only-countries="customCountries" />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const customCountries = ['VN', 'US', 'FR', 'CA', 'DK', 'DE']
</script>

Preferred countries

List preferred countries first

---

<template>
  <b-form-item topless :help-text="value" class="w-360px">
    <b-phone-input
      v-model="value"
      :preferred-countries="customCountries"
      :show-countries-filter="false"
    />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const customCountries = ['VN', 'US', 'FR', 'CA', 'DK', 'DE']
</script>

Ignored countries

Remove specific countries

---

<template>
  <b-form-item topless :help-text="value" class="w-360px">
    <b-phone-input
      v-model="value"
      :ignored-countries="customCountries"
      :show-countries-filter="false"
    />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const customCountries = ['VN', 'US', 'FR', 'CA', 'DK', 'DE']
</script>

Phone Input Attributes

Name	Description	Type	Accepted Values	Default
model-value	the input value	String	—	—
placeholder	input placeholder	String	—	—
default-phone-number	default value	String	—	—
default-country-code	default country	String	—	—
preferred-countries	countries will be list on top	Array<CountryCode>	—	—
ignored-countries	countries will be remove from list	Array<CountryCode>	—	—
only-countries	show only specific countries	Array<CountryCode>	—	—
disabled	disable input	Boolean	—	false
no-example	hide example number in placeholder	Boolean	—	false
show-countries-filter	show countries filter input	Boolean	—	true

Phone Input Events

Name	Description	Parameters
update	trigger when value updated	(value: ResultObject)
country-code	trigger when change selected country	(value: string)