Documentation
Documentation Hub

Phone Input

Ready to use phone input component with country code dropdown, with validation and formatting. The component extend the <BaseInput> component, so you can use all the props and events of the base component.

This component uses libphonenumber-js and country-codes-list to detect and validate the phone input value.
Show code
vue

Country Input

The component provides a country dropdown to select the country code, you can use the country prop to set the default country, otherwise it will be detected from the user's input. You can use the v-model:country notation to get the selected/detected country code.

Show code
vue

International and National Formats

By default, the input value will be formatted in the international format, you can change this behavior with the format prop to change it to national.

Show code
vue

Validation

The component provides a @validation event to indicate if the input value is valid or not

Show code
vue

Disabled State

Show code
vue

Input Size

Show code
vue

Input Shapes

Show code
vue

#<AddonInputPhone>

•Model

v-model
The value of the input.
Show example
vue

•Properties

country
Default country code, in ISO 3166-1 alpha-2 format.
Show example
vue
disabled
Show example
vue
error
An error message or boolean value indicating whether the input is in an error state.
Show example
vue
format
When set to `national`, the country indicator is omitted.
Show example
vue
height
The max height of the dropdown.
Show example
vue
icon
Default icon used when no country is selected/detected.
Show example
vue
item-height
The height of each dropdown item.
Show example
vue
rounded
The radius of the input.
Show example
vue
size
The size of the input.
Show example
vue

•Events

@validation
Show example
vue
@update:country
Show example
vue

•Slots

#country-label
Show example
vue
#country-placeholder
Show example
vue
#country-item
Show example
vue
#action
Show example
vue

•Exposed

validation
Show example
vue
currentCountry
Show example
vue
possibleCountries
Show example
vue
filter
Show example
vue
filterRef
Show example
vue
dropdownRef
Show example
vue
inputRef
Show example
vue