vue-tel-input
International Telephone Input with Vue.
Useful Links
Table of Contents
Getting started
-
Install the plugin:
npm install vue-tel-input
-
Add the plugin into your app:
Vue -
Use the
vue-tel-input
component:
Installation
npm
npm install vue-tel-input
Install the plugin into Vue:
Vue // Define default global options here (optional)
View all available options in Props.
Or use the component directly:
<!-- your-component.vue-->
Browser
Include vue-tel-input in the page.
If Vue is detected in the Page, the plugin is installed automatically.
Manually install the plugin into Vue:
Vue
Or use the component directly:
Vue
vue-form-generator
Use as a custom field ofCheck out the setup in CodeSandbox.
-
Add a component using
vue-form-generator
'sabstractField
mixin<!-- tel-input.vue --> -
Register the new field as a global component
;;Vue; -
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
Usage
Props
Test all props on CodeSandbox.
Property | Type | Default value | Description |
---|---|---|---|
autocomplete |
String |
'on' |
Native input 'autocomplete' attribute |
autofocus |
Boolean |
false |
Native input 'autofocus' attribute |
defaultCountry |
String |
'' |
Default country, will override the country fetched from IP address of user |
disabled |
Boolean |
false |
Disable input field |
disabledFetchingCountry |
Boolean |
false |
Disable fetching current country based on IP address of user |
dropdownOptions |
Object |
{ disabledDialCode: false, tabindex: 0 } |
Options for dropdown, supporting disabledDialCode and tabindex |
dynamicPlaceholder |
Boolean |
false |
Placeholder as a sample phone number in the current country, available from v3.1.1 |
enabledCountryCode |
Boolean |
false |
Enable country code in the input |
enabledFlags |
Boolean |
true |
Enable flags in the input |
ignoredCountries |
Array |
[] |
List of countries will NOT be shown on the dropdown. ie ['AU', 'BR'] |
inputClasses |
String | Array | Object |
'' |
Custom classes for the input |
inputId |
String |
'' |
Custom 'id' for the input |
inputOptions |
Object |
{ showDialCode: false, tabindex: 0 } |
Options for input, supporting showDialCode (always show dial code in the input) and tabindex |
maxLen |
Number |
25 |
Native input 'maxlength' attribute |
mode |
String |
'' |
Format number to 'international' (with + dial code) or 'national' (with 0...), available from v3.1.1 |
name |
String |
'telephone' |
Native input 'name' attribute |
onlyCountries |
Array |
[] |
List of countries will be shown on the dropdown. ie ['AU', 'BR'] |
placeholder |
String |
'Enter a phone number' |
Placeholder for the input |
preferredCountries |
Array |
[] |
Preferred countries list, will be on top of the dropdown. ie ['AU', 'BR'] |
required |
Boolean |
false |
Required property for HTML5 required attribute |
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) |
wrapperClasses |
String | Array | Object |
'' |
Custom classes for the wrapper |
customValidate |
Boolean | RegExp |
false |
Custom validation RegExp for input, available from v4.1.0 |
Events
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 |
|
focus |
Fires on focus event | ||
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 |
Slots
Slot | Description | Notes |
---|---|---|
arrow-icon |
Replace the arrow next to the flag with a component of your choice | Available from v2.4.3 |
Typescript Support
If you work with typescript you will need declaration requirements.
npm install --save-dev @types/vue-tel-input
Credits & Contributors
Credits
- Telephone Number parsing, validation by awesome-phonenumber.
- Country Codes data from intl-tel-input.
- User's country by ip2c.org, request using Fetch API.
Contributors
- 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.