props

Skip to content

Main NavigationDocumentation Sponsor Changelog GitHub

Appearance

Sidebar Navigation

Guide

Getting Started

Installation

Vue 2 Support

Usage

Props

Events

Slots

custom-form-of-vue-form-generator

Others

Typescript Support

v3

v2

Credits

On this page

Table of Contents for current page

Props

allCountries

Type: Array
Default: An array of all countries, see allCountries.js

All countries that are used in libphonenumber-js, can be overridden by this prop

autoFormat

Type: Boolean
Default: true

Auto update the input to the formatted phone number when it's valid

customValidate

Type: Boolean, RegExp
Default: false

Custom validation RegExp for input

defaultCountry

Type: String, Number
Default: ''

Default country (by iso2 or dialCode), will override the country fetched from IP address of user

disabled

Type: Boolean
Default: false

Disable vue-tel-input, including the input & flag dropdown

autoDefaultCountry

Type: Boolean
Default: true

To fetch default country based on IP address of user

dropdownOptions

Type: Object
Default:

Options for dropdown, see below

dropdownOptions.disabled

Type: Boolean
Default: false

Disable dropdown

dropdownOptions.showDialCodeInList

Type: Boolean
Default: true

Show dial code in the dropdown list

dropdownOptions.showDialCodeInSelection

Type: Boolean
Default: false

Show dial code in the dropdown selection

dropdownOptions.showFlags

Type: Boolean
Default: true

Show flags in the dropdown selection and list

dropdownOptions.showSearchBox

Type: Boolean
Default: false

Show country search box

dropdownOptions.tabindex

Type: Number
Default: 0

Native dropdown tabindex attribute

ignoredCountries

Type: Array
Default: []

List of countries will NOT be shown on the dropdown

inputOptions

Type: Object
Default:

Options for input, see below

inputOptions.autocomplete

Type: String
Default: 'on'

Native input autocomplete attribute

inputOptions.autofocus

Type: Boolean
Default: false

Native input autofocus attribute

inputOptions.aria-describedby

Type: String
Default: ''

Native input aria-describedby attribute

inputOptions.id

Type: String
Default: ''

Native input id attribute

inputOptions.maxlength

Type: Number
Default: 25

Native input maxlength attribute

inputOptions.name

Type: String
Default: 'telephone'

Native input name attribute

inputOptions.showDialCode

Type: Boolean
Default: false

Show dial code in input

inputOptions.placeholder

Type: String
Default: 'Enter a phone number'

Placeholder for the input

inputOptions.readonly

Type: Boolean
Default: false

Native input readonly attribute

inputOptions.required

Type: Boolean
Default: false

Native input required attribute

inputOptions.tabindex

Type: Number
Default: 0

Native input tabindex attribute

inputOptions.type

Type: String
Default: 'tel'

Native input type attribute

inputOptions.styleClasses

Type: String, Array, Object
Default: ''

Custom classes for the input

invalidMsg

Type: String
Default: ''

mode

Type: String
Default: 'auto'

Allowed values: 'auto' (Default set by phone), 'international' (Format number with the dial code i.e. + 61), 'national' (Format number without dial code i.e. 0321232)

onlyCountries

Type: Array
Default: []

List of countries will be shown on the dropdown

preferredCountries

Type: Array
Default: []

Preferred countries list, will be on top of the dropdown

styleClasses

Type: String, Array, Object
Default: ''

Custom classes for the wrapper

validCharactersOnly

Type: Boolean
Default: 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)

Next pageGetting Started