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

<script setup lang="ts">
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const phone = ref('138 0013 8000');
const country = ref('CN');
</script>

<template>
  <div style="max-width: 360px;">
    <CfPhoneInput v-model="phone" v-model:country="country" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">
      {{ country }} · {{ phone }}
    </div>
  </div>
</template>

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

Sizes / error / disabled

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

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const v1 = ref('138 0013 8000');
const v2 = ref('invalid!!');
const v3 = ref('555 123 4567');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <CfPhoneInput v-model="v1" country="CN" size="sm" />
    <CfPhoneInput v-model="v2" country="CN" :error="true" />
    <CfPhoneInput v-model="v3" country="US" size="lg" disabled />
  </div>
</template>

<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 }