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

<VueSimplePhone region="CN"/>

language

The display language for the country names.

• Type: Intl.LocalesArgument
• Default: ['zh-Hant']

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

value

The starting value to use.

• Type: String
• Default: undefined

<VueSimplePhone value="2345678901"/>

placeholder

The placeholder to use instead of the default.

• Type: String
• Default: the example phone number from each country

<VueSimplePhone placeholder="(555) 000-0000"/>

countries

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

• Type: String[]
• Default: country-flag-icons's list of countries

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

disabled

Whether the input can be interacted with or not.

• Type: Boolean
• Default: true

<VueSimplePhone :disabled="true"/>

displayFlags

Whether or not to display flags.

• Type: Boolean
• Default: true

<VueSimplePhone :displayFlags="false"/>

htmlAutocomplete

This is an alias for the html autocomplete attribute on the input element. In the future this will be named just autocomplete. For backwards compatability reasons this is not the case currently.

• Type: InputHTMLAttributes["autocomplete"]
• Default: undefined

<VueSimplePhone htmlAutocomplete="off"/>

searchAutocomplete

Whether or not to enable autocomplete for the country selector.

• Type: Boolean
• Default: true

<VueSimplePhone :searchAutocomplete="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

<VueSimplePhone :disableAutocompleteProcessing="true"/>

phoneNumberType

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

• Type: PhoneNumberTypes
• Default: undefined

<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

<VueSimplePhone :opened="true"/>

autocomplete

Deprecated

The autocomplete prop is deprecated. It will be repurposed to alias htmlAutocomplete in the future. Please use searchAutocomplete instead.

Whether or not to enable autocomplete for the country selector.

• Type: Boolean
• Default: true

<!-- ❌ Deprecated -->
<VueSimplePhone :autocomplete="false"/>

<!-- ✅ Use instead -->
<VueSimplePhone :searchAutocomplete="false"/>

Input Attributes

All input attributes are automatically passed through, so attributes such as required, form, name, readonly, etc. will be defined if passed through.

<form @submit.prevent="">
	<VueSimplePhone required="true"/>
	<button type="submit">Test Submit</button>
</form>

Missing Something?

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