International Phone Input Field With Country Flags – VPhoneInput

VPhoneInput is a user-friendly international telephone (E.164) input field component for Vuetify and Vue JS.

How to use it:

1. Import the VPhoneInput component and country flags.

import Vue from 'vue';
import VPhoneInputPlugin from 'v-phone-input';
import 'flag-icons/css/flag-icons.min.css';

Vue.use(VPhoneInputPlugin, { 
  // options
});

2. Add the VPhoneInput component to the template.

<template>
  <v-phone-input v-model="phone" />
</template>

3. Available props for the VPhoneInput component.

label: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('label'),
},
ariaLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('ariaLabel'),
},
countryLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('countryLabel'),
},
countryAriaLabel: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('countryAriaLabel'),
},
placeholder: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('placeholder'),
},
hint: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('hint'),
},
invalidMessage: {
  type: [String, Function] as PropType<MessageResolver>,
  default: () => getOption('invalidMessage'),
},
persistentPlaceholder: {
  type: Boolean,
  default: () => getOption('persistentPlaceholder'),
},
persistentHint: {
  type: Boolean,
  default: () => getOption('persistentHint'),
},
appendIcon: {
  type: String,
  default: undefined,
},
appendOuterIcon: {
  type: String,
  default: undefined,
},
prependInnerIcon: {
  type: String,
  default: undefined,
},
prependIcon: {
  type: String,
  default: undefined,
},
clearIcon: {
  type: String,
  default: undefined,
},
outlined: {
  type: Boolean,
  default: undefined,
},
filled: {
  type: Boolean,
  default: undefined,
},
shaped: {
  type: Boolean,
  default: undefined,
},
flat: {
  type: Boolean,
  default: undefined,
},
solo: {
  type: Boolean,
  default: undefined,
},
soloInverted: {
  type: Boolean,
  default: undefined,
},
backgroundColor: {
  type: String,
  default: undefined,
},
color: {
  type: String,
  default: undefined,
},
light: {
  type: Boolean,
  default: undefined,
},
dark: {
  type: Boolean,
  default: undefined,
},
rounded: {
  type: Boolean,
  default: undefined,
},
dense: {
  type: Boolean,
  default: undefined,
},
height: {
  type: [String, Number],
  default: undefined,
},
loaderHeight: {
  type: [String, Number],
  default: undefined,
},
reverse: {
  type: Boolean,
  default: false,
},
singleLine: {
  type: Boolean,
  default: undefined,
},
clearable: {
  type: Boolean,
  default: undefined,
},
autofocus: {
  type: Boolean,
  default: undefined,
},
error: {
  type: Boolean,
  default: undefined,
},
errorCount: {
  type: [Number, String],
  default: undefined,
},
errorMessages: {
  type: [Array, String],
  default: undefined,
},
messages: {
  type: [Array, String],
  default: undefined,
},
success: {
  type: Boolean,
  default: undefined,
},
successMessages: {
  type: [Array, String],
  default: undefined,
},
validateOnBlur: {
  type: Boolean,
  default: undefined,
},
readonly: {
  type: Boolean,
  default: undefined,
},
disabled: {
  type: Boolean,
  default: undefined,
},
loading: {
  type: Boolean,
  default: false,
},
rules: {
  type: Array as PropType<VPhoneInputRules>,
  default: () => [],
},
countryIconMode: {
  type: [String, Object] as PropType<CountryIconMode>,
  default: () => getOption('countryIconMode'),
},
allCountries: {
  type: Array as PropType<Country[]>,
  default: () => getOption('allCountries'),
},
preferredCountries: {
  type: Array as PropType<CountryIso2[]>,
  default: () => getOption('preferredCountries'),
},
onlyCountries: {
  type: Array as PropType<CountryIso2[]>,
  default: () => getOption('onlyCountries'),
},
ignoredCountries: {
  type: Array as PropType<CountryIso2[]>,
  default: () => getOption('ignoredCountries'),
},
defaultCountry: {
  type: String as PropType<CountryIso2 | undefined>,
  default: () => getOption('defaultCountry'),
},
countryGuesser: {
  type: Object as PropType<CountryGuesser>,
  default: () => getOption('countryGuesser'),
},
disableGuessingCountry: {
  type: Boolean,
  default: () => getOption('disableGuessingCountry'),
},
disableGuessLoading: {
  type: Boolean,
  default: () => getOption('disableGuessLoading'),
},
enableSearchingCountry: {
  type: Boolean,
  default: () => getOption('enableSearchingCountry'),
},
displayFormat: {
  type: String as PropType<PhoneNumberFormat>,
  default: () => getOption('displayFormat'),
},
country: {
  type: String,
  default: '',
},
value: {
  type: String,
  default: '',
},
countryProps: {
  type: Object,
  default: () => ({}),
},
phoneProps: {
  type: Object,
  default: () => ({}),
},

Preview:

Changelog:

v2.0.0 (07/27/2022)

• fix: components treeshaking support

Download Details:

Author: paul-thebaud

Live Demo: https://paul-thebaud.github.io/v-phone-input/

Download Link: https://github.com/paul-thebaud/v-phone-input/archive/refs/heads/main.zip

Official Website: https://github.com/paul-thebaud/v-phone-input

Install & Download:

# Yarn
$ yarn add v-phone-input flag-icons

# NPM
$ npm i v-phone-input flag-icons