This component uses MazInput and therefore inherits all these options

Important: Since 1.4.x, for a better compatibility with all differents countries, use default-phone-number prop to set and update the phone number. Updating the phone number is no longer available when you change the value (v-model)

  • default-phoner-number: Use to set the init phone number (Ex: "2015550123")
  • default-country-code: Use to set the init country code (Ex: "US")
  • value (v-model) is the result of both (Ex: "+12015550123")

For more informations: See the second example (Advanced settings)

Features list

  • Auto-detect country calling code with phone number provided
  • You can set preferred-countries, ignored-countries or have only-countries
  • Validation UI state: input becomes green when the phone number is valid (can be disabled by no-validation attr)
  • Multi options to getting country code : By default the component get the country code via the browser (disable it with no-use-browser-locale) or you can use fetch-country to get the country code via (network needed) - you can use default-country-code option instead to set one
  • Phone number formatting while typing
  • You can search your country in list (open countries list & type your country name)
  • Keyboard accessibility (Arrow down, Arrow up: Countries list navigation - Escape: Close countries list)
  • Phone number example for each country in placeholder/label
  • Auto focus phone number input after selecting country
  • You can disable the flags - no-flags props
  • Set your translations


You can translate the component with the translations attribute option like this:

  countrySelectorLabel: 'Code pays',
  countrySelectorError: 'Choisir un pays',
  phoneNumberLabel: 'Numéro de téléphone',
  example: 'Exemple :'

Keyboard accessibility

Entries Actions
ArrowDown Navigation down in countries list
ArrowUp Navigation up in countries list
Escape Close countries list
All letters characters Searching country name in countries list (should be open)



Value: null

Results sent on @update event:
Advanced settings
With default-phone-number & default-country-code & preferred-countries & no-flags & show-code-on-list

Value: null

Results sent on @update event:

How to use it ?


  import { MazPhoneNumberInput } from 'maz-ui'
  export default {
    components: { MazPhoneNumberInput },
    data () {
      return {
        phoneNumber: null