Preview Updated 2026-05-10

Phone input

Country code dropdown + number input. Ships with 12 common countries; override via countries.

Basic usage

The country segment has its own background; the dropdown supports fuzzy search. The component does not perform E.164 validation — wire up libphonenumber or similar on the consumer side.

CN · 138 0013 8000

src/App.vue vue

<CfPhoneInput v-model="phone" v-model:country="country" />

src/App.tsx tsx

<CfPhoneInput value={phone} onChange={setPhone} country={country} onCountryChange={setCountry} />

Sizes / error / disabled

error switches to a red border; disabled greys the whole control.

src/App.vue vue

<CfPhoneInput v-model="v" :error="true" />
<CfPhoneInput v-model="v" disabled />

src/App.tsx tsx

<CfPhoneInput value={v} onChange={setV} error />
<CfPhoneInput value={v} onChange={setV} disabled />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	`''`	Local number segment
`country`	`string`	`'CN'`	ISO 3166-1 alpha-2
`countries`	`CountryCode[]`	`defaultCountries` (12 items)	Custom country list
`size` / `placeholder` / `disabled` / `error`

CountryCode = { code: string; dial: string; label: string }