Select

Ne zaman kullanılır

Select, kullanıcının yazmadan, kısa ve kapalı bir listeden tek bir seçenek seçeceği durumlar içindir: görünüm, sıralama ölçütü, kategori.

Ne zaman kullanılmaz

• İki ile dört seçenek varsa ve hepsi görünmeliyse: Radyo grubu kullanın; seçenekler tek bakışta okunur.
• Uzun listeler için: Yaklaşık 15 seçeneği aşan listeler arama ister; arama kutulu bir seçim denetimi kullanın.
• Birden çok seçim için: Onay kutusu grubu kullanın.
• Bir işlem menüsü için: Select değer seçer; işlem çalıştırmaz.

Anatomi

Alan etiketiSeçin

Yardım metni burada yer alır.

AçıkKoyu

Kodu kopyala

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

const items = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
  { value: 'three', label: 'Üçüncü seçenek', disabled: true },
];

export default function Default() {
  return (
    <div className="max-w-80">
      <Select label="Alan etiketi" items={items} placeholder="Seçin" description="Yardım metni burada yer alır." />
    </div>
  );
}

1. Etiket: Field etiketi; gerektiğinde zorunluluk işareti.
2. Tetikleyici: Seçili değerin etiketi ya da yer tutucu, sonda aşağı ok ikonu. Değeri kadar geniştir; form sütununda olduğu gibi alanı doldurması için fullWidth verin.
3. Liste: Tetikleyicinin altında açılan, gölgeli yüzey; en az tetikleyici genişliğinde.
4. Seçenek: İsteğe bağlı ikon, etiket ve seçiliyse onay işareti. { label, items } girdisi seçenekleri bir başlık altında toplar; gruplar ayırıcılarla ayrılır.
5. Yardım metni ve hata: Field parçaları.

Davranış

• Tıklama, Enter, Space ya da aşağı ok listeyi açar; seçili seçenek vurgulanır.
• Liste açıkken harf yazmak etiketi o harfle başlayan seçeneğe gider.
• Bir seçenek seçilince liste kapanır ve odak tetikleyiciye döner.
• Escape listeyi seçim yapmadan kapatır.
• disabled seçenek görünür ama seçilemez. readOnly alan değeri gösterir, liste açılmaz.
• Liste, ekranda yer yoksa tetikleyicinin üstünde açılır. Liste kaydığında üst ya da alt kenardaki ok, üzerine gelince listeyi kaydırır.
• multiple ile Enter, Space ya da tıklama seçeneği işaretler veya kaldırır; liste açık kalır. Tetikleyici seçilen etiketleri dil kurallarına göre virgülle birleştirir.

Yönergeler

• Seçenekleri anlamlı bir sırayla verin: sıklık, alfabe ya da büyüklük.
• Yer tutucuyu bir eylem olarak yazın: “Seçin”.
• Varsayılan bir değer uygun ise defaultValue verin; kullanıcıyı boş seçimle bırakmayın.
• İkonları yalnızca seçenekleri ayırt etmeye yardım ediyorsa kullanın.

İçerik

• Seçenek etiketleri kısa ve aynı dilbilgisel yapıdadır.
• Hata mesajı ne yapılacağını söyler: “Bir seçenek seçin.”

Türkçe	İngilizce
Seçin	Choose
Bir seçenek seçin.	Choose an option.

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

• Field: Etiket, yardım metni ve hata bağlantısı.
• ToggleGroup: Görünür, hemen etki eden seçenekler.
• TextInput: Serbest metin girişi.