Vue Simple Phone

Appearance

Props ​

Vue Simple Phone has the following props

region ​

The default region country code to use.

  • Type: String a ISO 3166-1 country code
  • Default: US
vue
<VueSimplePhone region="CN"/>

language ​

The display language for the country names.

vue
<VueSimplePhone :language="['zh-Hant']"/>

value ​

The starting value to use.

  • Type: String
  • Default: undefined
vue
<VueSimplePhone value="2345678901"/>

placeholder ​

The placeholder to use instead of the default.

  • Type: String
  • Default: the example phone number from each country
vue
<VueSimplePhone placeholder="(555) 000-0000"/>

countries ​

The list of countries to display in the dropdown as ISO 3166-1 codes

vue
<VueSimplePhone :countries="['US', 'CN', 'FI', 'SE', 'MX', 'JP']"/>

disabled ​

Whether the input can be interacted with or not.

  • Type: Boolean
  • Default: true
vue
<VueSimplePhone :disabled="true"/>

displayFlags ​

Whether or not to display flags.

  • Type: Boolean
  • Default: true
vue
<VueSimplePhone :displayFlags="false"/>

autocomplete ​

Whether or not to enable autocomplete for the country selector.

  • Type: Boolean
  • Default: true
vue
<VueSimplePhone :autocomplete="false"/>

disableAutocompleteProcessing ​

Controls how the autocomplete input behaves. When set to true, the input functions like a standard text field, allowing character-by-character editing (e.g., backspace removes only the last character instead of clearing the entire query).

  • Type: Boolean
  • Default: false
vue
<VueSimplePhone :disableAutocompleteProcessing="true"/>

phoneNumberType ​

The type of phone number example to give to the user.

vue
<VueSimplePhone phoneNumberType="toll-free"/>

opened ​

Whether or not the dropdown is open, note that it is not closeable, unless you change the value.

  • Type: Boolean
  • Default: undefined
vue
<VueSimplePhone :opened="true"/>

Missing Something? ​

Create an issue on our GitHub! We very well may be able to add your feature.