PhoneInput

Phone number field with a country-code selector; the value is an object with code and number. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue

import { UiPhoneInput } from '@ziyarago/ui/vue'

Default

Phone

Vue

<UiPhoneInput label="Phone" v-model="value" />

Filled

WhatsApp number

Vue

<UiPhoneInput label="WhatsApp number" v-model="value" />

Custom countries

Phone

Vue

<UiPhoneInput
  label="Phone"
  :countries="[{ value: '+62', label: 'ID +62' }, { value: '+60', label: 'MY +60' }, { value: '+92', label: 'PK +92' }]"
  v-model="value"
 />

Sizes

Phone

Vue

<UiPhoneInput size="xs" label="Phone" v-model="value" />

<UiPhoneInput size="sm" label="Phone" v-model="value" />

<UiPhoneInput size="md" label="Phone" v-model="value" />

<UiPhoneInput size="lg" label="Phone" v-model="value" />

<UiPhoneInput size="xl" label="Phone" v-model="value" />

API reference

Phone field with a country code dropdown. Use for contact numbers where the dial code matters.

Props

PropType and valuesDefaultDescription

modelValuev-model{ code?: string; number?: string }'{}'Object with the dial code (e.g. "+998") and the national number as typed.

countries{ value: string | number; label: string; disabled?: boolean }[]'[{ value: '+966', label: 'SA +966' }, { value: '+998', label: 'UZ +998' }, { value: '+7', label: 'RU +7' }, { value: '+90', label: 'TR +90' }, { value: '+20', label: 'EG +20' }]'Dial code options. value is the code, label is what the dropdown shows.

labelstring—Label shown above the control.

placeholderstring—Placeholder of the number field. Defaults to "90 123 45 67".

hintstring—Helper text under the control. Hidden while error is set.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with a new { code, number } object when either part changes.

Notes

When code is missing the first entry of countries is shown but not written to the model until the user picks one.