VPhoneInput

Appearance

v-phone-input / VPhoneInputProps

Interface: VPhoneInputProps<Country, CountryInputComponent> ​

Defined in: dist/types.d.ts:302

Internal

Component props for VPhoneInput.

Extends ​

Type Parameters ​

Country ​

Country extends VPhoneInputCountryObject

CountryInputComponent ​

CountryInputComponent extends VPhoneCountryInputComponent

Properties ​

ariaLabel? ​

readonly optional ariaLabel: VPhoneInputMessage<Country, undefined> | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:52

Customize the phone input aria-label.

Inherited from ​

VPhoneInputNonModelProps.ariaLabel

countries? ​

readonly optional countries: Country[]

Defined in: dist/props/makePhoneInputCountryProps.d.ts:35

List of available countries.

Default Value ​

Uses countries-list two-letter codes, dial codes resolved using awesome-phonenumber package's getCountryCodeForRegionCode, and given locale (or en) translated names using Intl.DisplayNames.

Inherited from ​

VPhoneInputNonModelProps.countries

country? ​

optional country: string | null

Defined in: dist/types.d.ts:310

Currently selected country.

countryAriaLabel? ​

readonly optional countryAriaLabel: VPhoneInputMessage<Country> | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:70

Customize the country input aria-label.

Default Value ​

'Country for <label>' when using the component, null otherwise.

Inherited from ​

VPhoneInputNonModelProps.countryAriaLabel

countryDisplayComponent? ​

readonly optional countryDisplayComponent: Component<VPhoneCountryDisplayProps<Country>>

Defined in: dist/props/makePhoneInputProps.d.ts:26

Country display component.

Inherited from ​

VPhoneInputNonModelProps.countryDisplayComponent

countryInputComponent? ​

readonly optional countryInputComponent: [{ type: PropType<CountryInputComponent>; }] extends [Prop<V, D>] ? unknown extends V ? keyof V extends never ? IfAny<V, V, D> : V : V : object

Defined in: dist/props/makePhoneInputProps.d.ts:12

Internal

Country input component.

Use usePhoneInput instead if you want to use a custom component.

Inherited from ​

VPhoneInputNonModelProps.countryInputComponent

countryInputComponentProps? ​

readonly optional countryInputComponentProps: [{ type: PropType<ComponentProps<CountryInputComponent>>; }] extends [Prop<V, D>] ? unknown extends V ? keyof V extends never ? IfAny<V, V, D> : V : V : object

Defined in: dist/props/makePhoneInputProps.d.ts:20

Internal

Country input component specific props.

Use countryProps property instead.

Inherited from ​

VPhoneInputNonModelProps.countryInputComponentProps

countryLabel? ​

readonly optional countryLabel: VPhoneInputMessage<Country> | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:61

Customize the country input label.

Default Value ​

'Country for <label>' when using the composable, null otherwise.

Inherited from ​

VPhoneInputNonModelProps.countryLabel

countryLocale? ​

readonly optional countryLocale: string

Defined in: dist/props/makePhoneInputCountryProps.d.ts:15

Locale to use when localizing country names.

Default Value ​

'en'

Inherited from ​

VPhoneInputNonModelProps.countryLocale

countryName()? ​

readonly optional countryName: (iso2) => string

Defined in: dist/props/makePhoneInputCountryProps.d.ts:24

Resolve a country name from its ISO-2 code.

Parameters ​

iso2 ​

string

Returns ​

string

Default Value ​

Uses Intl.DisplayNames to localize the country name in defined countryLocale.

Inherited from ​

VPhoneInputNonModelProps.countryName

countryProps? ​

readonly optional countryProps: [{ type: PropType<ComponentProps<CountryInputComponent>>; }] extends [Prop<V, D>] ? unknown extends V ? keyof V extends never ? IfAny<V, V, D> : V : V : object

Defined in: dist/props/makePhoneInputProps.d.ts:45

Properties to pass to the country input (VSelect or VAutocomplete).

Inherited from ​

VPhoneInputNonModelProps.countryProps

defaultCountry? ​

readonly optional defaultCountry: VPhoneInputCountryObjectOrIso2

Defined in: dist/props/makePhoneInputCountryProps.d.ts:74

Default country to use.

Default Value ​

First country from the available countries list.

Inherited from ​

VPhoneInputNonModelProps.defaultCountry

displayFormat? ​

readonly optional displayFormat: PhoneNumberFormat | null

Defined in: dist/props/makePhoneInputComposableProps.d.ts:36

Format phone number for text input value.

Remarks ​

This only applies to valid phone numbers. Using null will disable format feature and keep the input as is.

Default Value ​

'national'

Inherited from ​

VPhoneInputNonModelProps.displayFormat

displayFormatDelay? ​

readonly optional displayFormatDelay: number | boolean

Defined in: dist/props/makePhoneInputComposableProps.d.ts:50

Delay (in milliseconds) before formatting the phone number for text input value when detecting an input.

Remarks ​

This only applies to valid phone numbers. Using 0 will format immediately after input.

Default Value ​

1000 if displayFormatOnBlur is disabled.

Inherited from ​

VPhoneInputNonModelProps.displayFormatDelay

displayFormatOnBlur? ​

readonly optional displayFormatOnBlur: boolean

Defined in: dist/props/makePhoneInputComposableProps.d.ts:67

Format the phone number for text input only on blur event.

Remarks ​

This bypass the displayFormatDelay option, and only format the phone number on blur event or on displayFormat property change. Using false will restore the displayFormatDelay behavior. When using the composable, it is required to bind countryInputRef and phoneInputRef to appropriate focusable inputs.

Default Value ​

true

Inherited from ​

VPhoneInputNonModelProps.displayFormatOnBlur

example? ​

readonly optional example: VPhoneInputMessage<Country, undefined, undefined>

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:37

Customize the phone input example.

Default Value ​

Use awesome-phonenumber package's getExample function with current country.

Inherited from ​

VPhoneInputNonModelProps.example

exampleFormat? ​

readonly optional exampleFormat: PhoneNumberFormat | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:19

Format example phone.

Remarks ​

Using null will disable formating example phone numbers.

Default Value ​

displayFormat value if available, 'national' otherwise.

Inherited from ​

VPhoneInputNonModelProps.exampleFormat

exampleType? ​

readonly optional exampleType: PhoneNumberTypes

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:28

Type of phone number to use for example phone.

Default Value ​

'mobile'

Inherited from ​

VPhoneInputNonModelProps.exampleType

excludeCountries? ​

readonly optional excludeCountries: VPhoneInputCountryObjectOrIso2[]

Defined in: dist/props/makePhoneInputCountryProps.d.ts:65

List of countries to exclude.

Remarks ​

When specified, any country which is in this list will be excluded from available countries.

Inherited from ​

VPhoneInputNonModelProps.excludeCountries

guessCountry? ​

readonly optional guessCountry: VPhoneInputCountryGuesser

Defined in: dist/props/makePhoneInputComposableProps.d.ts:10

Guess the country of the user.

Inherited from ​

VPhoneInputNonModelProps.guessCountry

guessLoading? ​

readonly optional guessLoading: boolean

Defined in: dist/props/makePhoneInputProps.d.ts:32

Toggle country input loading state whenever a country is currently guessing.

Inherited from ​

VPhoneInputNonModelProps.guessLoading

hint? ​

readonly optional hint: VPhoneInputMessage<Country>

Defined in: dist/props/makePhoneInputProps.d.ts:57

Customize the phone input hint.

Inherited from ​

VPhoneInputNonModelProps.hint

includeCountries? ​

readonly optional includeCountries: VPhoneInputCountryObjectOrIso2[]

Defined in: dist/props/makePhoneInputCountryProps.d.ts:55

List of countries to include.

Remarks ​

When specified, any country which is not in this list will be excluded from available countries.

Inherited from ​

VPhoneInputNonModelProps.includeCountries

invalidMessage? ​

readonly optional invalidMessage: VPhoneInputMessage<Country> | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:86

Customize the phone input invalid message returned by the validate function generated rule.

Default Value ​

'The "<label>" field is not a valid phone number (example: <example>).'

Inherited from ​

VPhoneInputNonModelProps.invalidMessage

label? ​

readonly optional label: VPhoneInputMessage<Country, undefined>

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:46

Customize the phone input label.

Default Value ​

'Phone'

Inherited from ​

VPhoneInputNonModelProps.label

modelFormat? ​

readonly optional modelFormat: PhoneNumberFormat | null

Defined in: dist/props/makePhoneInputComposableProps.d.ts:23

Format phone number for modelValue updates.

Remarks ​

This only applies to valid phone numbers. Using null will disable format feature and keep the input as is.

Default Value ​

'e164'

Inherited from ​

VPhoneInputNonModelProps.modelFormat

modelValue? ​

optional modelValue: string | null

Defined in: dist/types.d.ts:306

Current phone number, formatted using modelFormat.

phoneProps? ​

readonly optional phoneProps: NonNullable<Partial<{ active: boolean; autofocus: boolean; centerAffix: boolean; clearable: boolean; clearIcon: IconValue; counter: string | number | boolean | null; density: Density; detailsActive: boolean; dirty: boolean; disabled: boolean; error: boolean; errorMessages: string | readonly string[] | null; flat: boolean; focused: boolean; glow: boolean; hideSpinButtons: boolean; indentDetails: boolean; maxErrors: string | number; messages: string | readonly string[]; persistentClear: boolean; persistentCounter: boolean; persistentHint: boolean; persistentPlaceholder: boolean; readonly: boolean | null; reverse: boolean; rounded: string | number | boolean; rules: readonly (string | boolean | PromiseLike<ValidationResult> | [string, any, string?] | (value) => ValidationResult | (value) => PromiseLike<ValidationResult>)[]; singleLine: boolean; style: StyleValue; tile: boolean; type: string; variant: "outlined" | "plain" | "filled" | "solo" | "solo-filled" | "solo-inverted" | "underlined"; }> & Omit<object & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "active" | "autofocus" | "centerAffix" | "clearIcon" | "clearable" | "counter" | "density" | "detailsActive" | "dirty" | "disabled" | "error" | "errorMessages" | "flat" | "focused" | "glow" | "hideSpinButtons" | "indentDetails" | "maxErrors" | "messages" | "persistentClear" | "persistentCounter" | "persistentHint" | "persistentPlaceholder" | "readonly" | "reverse" | "rounded" | "rules" | "singleLine" | "style" | "tile" | "variant">>

Defined in: dist/props/makePhoneInputProps.d.ts:51

Properties to pass to the country input (VTextField).

Inherited from ​

VPhoneInputNonModelProps.phoneProps

placeholder? ​

readonly optional placeholder: VPhoneInputMessage<Country> | null

Defined in: dist/props/makePhoneInputMessagesProps.d.ts:76

Customize the phone input placeholder.

Inherited from ​

VPhoneInputNonModelProps.placeholder

preferCountries? ​

readonly optional preferCountries: VPhoneInputCountryObjectOrIso2[]

Defined in: dist/props/makePhoneInputCountryProps.d.ts:45

List of countries to prefer.

Remarks ​

When specified, any country which is in the list will appear first in available countries.

Inherited from ​

VPhoneInputNonModelProps.preferCountries

validate? ​

readonly optional validate: (phone, country) => boolean | null

Defined in: dist/props/makePhoneInputComposableProps.d.ts:81

Validate a phone number.

Remarks ​

Using null will disable the validation.

Default Value ​

Ensure ParsedPhoneNumber.valid is true and ParsedPhoneNumber.regionCode is a selectable country (not excluded from the countries list).

Inherited from ​

VPhoneInputNonModelProps.validate

wrapperAttrs? ​

readonly optional wrapperAttrs: HTMLAttributes & ReservedProps & Record<string, unknown>

Defined in: dist/props/makePhoneInputProps.d.ts:39

Properties to pass to the wrapper div.

Inherited from ​

VPhoneInputNonModelProps.wrapperAttrs