Menu
Documentation

Phone Input

Optional dependencies

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

Ready to use phone input component with country code dropdown, with validation and formatting.

Example

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.

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.

Validation

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

Disabled State

Input Size

Input Shapes

Components

AddonInputPhone