International Telephone Input with Vue.
Checkout Demo or Playground.
If you are using v2.x.x, check out this documentation.
- yarn:
yarn add vue-tel-input
- npm:
npm install vue-tel-input
-
Install the component:
import Vue from 'vue' import VueTelInput from 'vue-tel-input' Vue.use(VueTelInput)
-
In your component:
<template> ... <vue-tel-input v-model="phone"></vue-tel-input> ... <template> <script> export default { data() { return { phone: '', }; }, } </script>
Use as a custom field of vue-form-generator
Check out the setup in Codesandbox.
-
Add a component using
vue-form-generator
'sabstractField
mixin<!-- tel-input.vue --> <template> <vue-tel-input v-model="value"></vue-tel-input> </template> <script> import { abstractField } from 'vue-form-generator'; export default { name: 'TelephoneInput', mixins: [abstractField], }; </script>
-
Register the new field as a global component
import Vue from 'vue'; import TelInput from '<path>/tel-input.vue'; Vue.component('field-tel-input', TelInput);
-
Now it can be used as
tel-input
in schema ofvue-form-generator
var schema: { fields: [{ type: "tel-input", label: "Awesome (tel input)", model: "telephone" }] };
Read more on vue-form-generator
's instruction page
Test all props on CodeSandbox.
Property | Type | Default value | Description |
---|---|---|---|
defaultCountry |
String |
'' |
Default country, will override the country fetched from IP address of user |
disabledFetchingCountry |
Boolean |
false |
Disable fetching current country based on IP address of user |
disabled |
Boolean |
false |
Disable input field |
disabledFormatting |
Boolean |
false |
Disable formatting the phone number in the input, the formatted result still be accessible by formattedNumber returned from onInput event |
placeholder |
String |
'Enter a phone number' |
Placeholder for the input |
required |
Boolean |
false |
Required property for HTML5 required attribute |
enabledCountryCode |
Boolean |
false |
Enable country code in the input |
enabledFlags |
Boolean |
true |
Enable flags in the input |
preferredCountries |
Array |
[] |
Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR'] |
onlyCountries |
Array |
[] |
List of countries will be shown on the dropdown. ie ['AU', 'BR'] |
ignoredCountries |
Array |
[] |
List of countries will NOT be shown on the dropdown. ie ['AU', 'BR'] |
autocomplete |
String |
'on' |
Native input 'autocomplete' attribute |
name |
String |
'telephone' |
Native input 'name' attribute |
maxLen |
Number |
25 |
Native input 'maxlength' attribute |
wrapperClasses |
String | Array | Object |
'' |
Custom classes for the wrapper |
inputClasses |
String | Array | Object |
'' |
Custom classes for the input |
inputId |
String |
'' |
Custom 'id' for the input |
dropdownOptions |
Object |
{ disabledDialCode: false, tabindex: 0 } |
Options for dropdown, supporting disabledDialCode and tabindex |
inputOptions |
Object |
{ showDialCode: false, tabindex: 0 } |
Options for input, supporting showDialCode (always show dial code in the input) and tabindex |
validCharactersOnly |
Boolean |
false |
Only allow valid characters in a phone number (will also verify in mounted , so phone number with invalid characters will be shown as an empty string) |
mode |
String |
'' |
Format number to 'International' (with + dial code) or 'National' (with 0...), available from v3.1.1 |
dynamicPlaceholder |
Boolean |
false |
Placeholder as a sample phone number in the current country, available from v3.1.1 |
Event | Arguments | Description | Notes |
---|---|---|---|
input |
String , Object |
Fires when the input changes with the argument is the object includes { number, isValid, country } |
onInput deprecated |
validate |
Object |
Fires when the correctness of the phone number changes (from true to false or vice-versa) and when the component is mounted { number, isValid, country } |
onValidate deprecated |
blur |
Fires on blur event | onBlur deprecated |
|
space |
Fires on keyup.space event | onSpace deprecated |
|
enter |
Fires on keyup.enter event | onEnter deprecated |
|
open |
Fires when the flags dropdown opens | ||
close |
Fires when the flags dropdown closes | ||
country-changed |
Object |
Fires when country changed (even for the first time) | Available from v2.4.2 |
Slot | Description | Notes |
---|---|---|
arrow-icon |
Replace the arrow next to the flag with a component of your choice | Available from v2.4.3 |
- Telephone Number parsing, validation by awesome-phonenumber.
- Country Codes data from intl-tel-input.
- User's country by ip2c.org, request using Fetch API.
# install dependencies
$ yarn/npm install
# compile demo for development
$ yarn/npm dev
# open Browser and start serving in demo
$ yarn/npm demo:open
# compile dist demo
$ yarn/npm dist:demo
# compile dist
$ yarn/npm dist
If you working with typescript will need declaration requirements.
npm install --save-dev @types/vue-tel-input
- mikob for super awesome work to remove the bootstrap dependency.
- kalcifield for helping make the input preload with a phone number.
- serbemas for adding web components support.
...more
made with โค by Steven.