Blog Detail


Text field to Format phone number with Country Code in Vuejs cover image

arrow_back Text field to Format phone number with Country Code in Vuejs

MazPhoneNumberInput is a standalone input component made with Vue Js which helps the user to enter a phone number and validate it according to the country. You can visit its demo here.


It has many amazing features given below:

  • You can set preferred-countries, ignored-countries or have only-countries
  • Validator State: input becomes green (you can modify this color with valid-color option) when the phone number is valid (can be disabled by no-validator-state 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 the 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 a country
  • You can disable the flags - no-flags props
  • Set your translations


You can install this component via Npm or Yarn:


yarn add vue-phone-number-input


npm i --save vue-phone-number-input

How to use it ?

ES6 Modules / CommonJS

import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';

Vue.component('vue-phone-number-input', VuePhoneNumberInput);
<VuePhoneNumberInput v-model="yourValue" />


<VuePhoneNumberInput v-model="yourValue" />

<script src="" charset="utf-8"></script>
<script src="./dist/vue-phone-number-input.umd.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./dist/vue-phone-number-input.css">

<script type="text/javascript">
  Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default);


  • Differents size of input (sm or lg) size=“sm|lg”
  • Disabled option (disabled prop)
  • Dark UI option (dark prop)
  • Active a clear button by the prop clearable (cf: VueInputUi options)
  • Active a loader progress bar by the prop loader (cf: VueInputUi options)
  • And others

For more details & source code, you can visit the documentation on Github.

Published at : 18-02-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project