PhoneInput

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { PhoneInput } from '@bigbang/ui';

Kaynak

PhoneInput.tsx

Storybook

PhoneInput · Playground

PhoneInput, @bigbang/ui paketindedir.

import { PhoneInput, isPhoneComplete, toE164 } from '@bigbang/ui';

<PhoneInput label="Telefon" name="phone" countries={['TR', 'AZ']} value={phone} onValueChange={setPhone} />;

Yardımcılar: parsePhone(text, country, allowed), toE164(value), isPhoneComplete(value), phoneCountries.

Özellikler

labelZorunlu

Açıklama

Görünen etiket; grubu ve numara alanını adlandırır.

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verilirse alan geçersiz olur ve mesaj numarayla birlikte okunur.

Tür

string

invalid

Açıklama

Alanı mesajsız geçersiz işaretler.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: numara required alır ve etiket işaretlenir.

Tür

boolean

Varsayılan

false

value

Açıklama

Kontrollü değer: ülke ve yurt içi önek 0 olmadan ulusal rakamlar; boşken null. onValueChange ile birlikte verin.

Tür

PhoneValue | null

defaultValue

Açıklama

Kontrolsüz alanın ilk değeri.

Tür

PhoneValue

onValueChange

Açıklama

Yeni değer ve E.164 biçimindeki numarayla (+905321234567) çağrılır; boşken null.

Tür

(value: PhoneValue | null, e164: string | null) => void

defaultCountry

Açıklama

Alan boşken seçili ülke.

Tür

'TR' | 'AZ' | 'DE' | 'FR' | 'GB' | 'NL' | 'US'

Varsayılan

'TR'

countries

Açıklama

Seçicide bu sırayla sunulan ülkeler. Hepsi için vermeyin.

Tür

readonly ('TR' | 'AZ' | 'DE' | 'FR' | 'GB' | 'NL' | 'US')[]

size

Açıklama

Alan yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

readOnly

Açıklama

Değer okunabilir ve kopyalanabilir ama değiştirilemez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Seçiciyi, numarayı ve etiketi devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Alan adı; form numarayı E.164 olarak alır.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="phone-input": kök öğe üzerinde.
• data-part: label, box, country, popup, item, control, description, error.