Bileşenler

Autocomplete

Yazarken öneri gösteren, ama her metni kabul eden metin alanı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Autocomplete } from '@bigbang/ui';
Kaynak: Autocomplete.tsx
Storybook: Autocomplete · Playground

Autocomplete, @bigbang/ui paketindedir.

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

<Autocomplete label="Banka" name="bank" suggestions={banks} value={value} onValueChange={setValue} />;

Özellikler

labelZorunlu

Açıklama: Alanın görünen etiketi.
Tür: string

suggestionsZorunlu

Açıklama: Kullanıcı yazarken alanın altında gösterilen öneriler; yazılan metin hiçbirine uymayabilir.
Tür: readonly string[]

description

Açıklama: Alanın altındaki yardım metni; aria-describedby ile bağlanır.
Tür: ReactNode

error

Açıklama: Verildiğinde alan geçersiz işaretlenir ve ileti girişle okunur.
Tür: string

invalid

Açıklama: Alanı iletisiz geçersiz işaretler.
Tür: boolean
Varsayılan: false

required

Açıklama: Değer zorunludur; etikete * eklenir.
Tür: boolean
Varsayılan: false

value

Açıklama: Kontrollü metin. onValueChange ile birlikte verin.
Tür: string

defaultValue

Açıklama: Kontrolsüz alanın başlangıç metni.
Tür: string

onValueChange

Açıklama: Metin yazarak ya da öneri seçerek her değiştiğinde çağrılır.
Tür: (value: string) => void

placeholder

Açıklama: Yer tutucu metin; etiketin yerini tutmaz.
Tür: string

inlineComplete

Açıklama: Kullanıcı listede gezinirken vurgulanan öneriyi girişe yazar.
Tür: boolean
Varsayılan: false

limit

Açıklama: Aynı anda gösterilecek en fazla öneri. Verilmezse tüm eşleşmeler gösterilir.
Tür: number

loading

Açıklama: Öneriler sunucudan gelirken yükleniyor satırı gösterir; liste önerileri yeniden süzmez.
Tür: boolean
Varsayılan: false

emptyText

Açıklama: Hiçbir öneri eşleşmezse listede gösterilir. Verilmezse liste kapanır.
Tür: string

showClear

Açıklama: Metin varken bir temizle düğmesi gösterir.
Tür: boolean
Varsayılan: false

size

Açıklama: Giriş yüksekliği: TextInput gibi 32, 36 ya da 40 px.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

readOnly

Açıklama: Metin okunabilir ama değiştirilemez.
Tür: boolean
Varsayılan: false

disabled

Açıklama: Alanı devre dışı bırakır.
Tür: boolean
Varsayılan: false

name

Açıklama: Form gönderilirken kullanılan alan adı.
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="autocomplete": kök öğede.
data-part: control, input, clear, popup, item.
data-highlighted, data-popup-open: Base UI’dan.