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.
Show codeHide code
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 codeHide code
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 codeHide code
The component provides a @validation event to indicate if the input value is valid or not
Show codeHide code
Show codeHide code
Show codeHide code
Show codeHide code
Name
Type
Default
roundedThe radius of the input.
Show exampleHide example
countryDefault country code, in ISO 3166-1 alpha-2 format.
Show exampleHide example
formatWhen set to `national`, the country indicator is omitted.
Show exampleHide example
heightThe max height of the dropdown.
Show exampleHide example
item-heightThe height of each dropdown item.
Show exampleHide example
iconDefault icon used when no country is selected/detected.
Show exampleHide example
sizeThe size of the input.
Show exampleHide example
errorAn error message or boolean value indicating whether the input is in an error state.
Show exampleHide example
disabledShow exampleHide example
Name
Emitted Value Type
@validationShow exampleHide example
@update:countryShow exampleHide example
Name
Slot Prop Type
#country-labelShow exampleHide example
#country-placeholderShow exampleHide example
#country-itemShow exampleHide example
#actionShow exampleHide example
Name
Type
validationShow exampleHide example
currentCountryShow exampleHide example
possibleCountriesShow exampleHide example
filterShow exampleHide example
filterRefShow exampleHide example
dropdownRefShow exampleHide example
inputRef