Combobox

Ne zaman kullanılır

Combobox, uzun bir listeden yazarak seçim içindir: şehir, kişi, etiket. Liste sunucudan gelebilir, birden çok seçim yapılabilir ve kullanıcı listede olmayan bir seçenek ekleyebilir.

Ne zaman kullanılmaz

• Kısa ve kapalı bir liste için (yaklaşık 15’e kadar): Select kullanın.
• Serbest metin için: TextInput kullanın.
• Birkaç görünür seçenek için: CheckboxGroup ya da radyo düğmeleri kullanın.
• Uygulama genelinde arama ve komutlar için: Command kullanın.

Anatomi

Şehir

Yazdıkça liste daralır.

AçıkKoyu

Kodu kopyala

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

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Default() {
  return (
    <Combobox label="Şehir" items={cities} placeholder="Şehir arayın" description="Yazdıkça liste daralır." className="max-w-80" />
  );
}

1. Etiket: Görünür ad; girişe bağlıdır.
2. Giriş: Yazılan metin listeyi süzer. multiple ile çipler girişin önünde durur.
3. Ok düğmesi: Listeyi açar. showClear ile bir değer seçiliyken yerini temizle düğmesi alır.
4. Liste: Süzülen seçenekler; seçili olanda onay işareti vardır.
5. Durum satırı: Yükleniyor, sonuç yok ya da “… ekle”.

Davranış

• Yazmak listeyi açar ve Provider dilinde büyük-küçük harf gözetmeden süzer; “i” ve “İ” Türkçe kurala uyar.
• Yukarı ve aşağı ok seçenekleri vurgular, Enter seçer, Escape kapatır. Devre dışı seçenekler seçilemez.
• Tek seçimde seçilen etiket girişe yazılır. multiple ile seçim çip olur ve giriş boşalır; boş girişte Backspace son çipi kaldırır.
• onCreate verildiğinde metin hiçbir etiketle eşleşmezse listenin sonunda “… ekle” satırı çıkar.
• Sunucu sonuçlarında loading süresince yükleniyor satırı gösterilir ve duyurulur; “Sonuç bulunamadı” yükleme bitince çıkar.
• Liste alandan büyüyerek ve solarak açılır, daha hızlı kapanır; ok sabit kalır, yeni çip yumuşakça belirir. Hareketi azaltma tercihinde yalnızca saydamlık değişir.
• Gruplu items ile her grup başlığıyla gösterilir; süzme gruplar içinde yapılır ve boş kalan grup gizlenir. Yeni seçenek satırı başlıksız son grupta durur.

Yönergeler

• Her zaman görünür bir etiket verin; yer tutucu ipucudur.
• Sunucu sonuçlarında istekleri kısa bir gecikmeyle gruplayın.
• Çoklu seçimde seçim sayısı çok büyüyecekse seçilenleri alanın dışında listeleyin.
• Yeni seçenek eklemeyi yalnızca kullanıcı katkısı beklenen listelerde açın (etiketler gibi).

İçerik

• Etiket neyin seçildiğini söyler: “Şehir”.
• Yer tutucu eylem söyler: “Şehir arayın”.

Türkçe	İngilizce
Sonuç bulunamadı	No results
Yükleniyor	Loading
“Kiraz” ekle	Add “Kiraz”
Seçimi temizle	Clear selection
Ankara kaldır	Remove Ankara

Cam

Provider material="glass" altında seçenek listesi cama döner. Alanın kendisi her zaman opaktır. material="solid" onu opak tutar.

İlgili bileşenler

• Select: Kısa ve kapalı listeden tek seçim.
• TextInput: Serbest metin.
• CheckboxGroup: Görünür seçeneklerden çoklu seçim.