props

Vue Tel Input

Appearance

Props ​

allCountries

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.searchBoxPlaceholder

  • Type: String
  • Default: ''

Placeholder for the 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)