Tek seçim listeleri. Select: küçük, sabit liste (≤8 öğe), sıralı durum/şube. Combobox: aranabilir uzun liste, gruplama destekler. Multi-select: chip görüntüsü ile birden çok değer. Native <select> mobil ve form fallback'i için tutulur.
01 · Trigger varyantları
Closed · default
Closed · placeholder
Open · focus
Disabled
02 · Açık liste · grup + arama (combobox)
Sipariş durumu · küçük select
YeniN
HazırlanıyorP
HazırR
YoldaD
Teslim Edildi✓
Şube · combobox + arama + grup
İstanbul Anadolu
Kadıköy · Bağdat
Kadıköy · Moda
İstanbul Avrupa
Beşiktaş · Akaretler (eşleşme yok)
Boş durum · arama eşleşmedi
"zzqq" için müşteri bulunamadı. + Yeni müşteri ekle
03 · Multi-select
Seçili değerler chip olarak trigger içinde — backspace ile en sonu siler
Etiket filtreleri
VIP ×Vegan ×Yeni müşteri ×
Karar matrisi
· ≤8 öğe, sabit set → Select; aranabilir liste → Combobox; çoklu değer → Multi-select; serbest metin + öneri → Combobox + autocomplete.
· ≤6 öğe ve düz hiyerarşi → Segmented control ya da Radio group kullan; select kullanma.
· Mobile: native <select>'e düş; iOS spinner UX'e müdahale etme.
· Klavye: ↑↓ gezinti, ⏎ seç, ⎋ kapat, type-ahead (ilk harf ile atla); combobox'ta input focus listede ilk eşleşmeye lider olur.
· Trigger 6px radius, 1px border, 8×12 padding — input ile aynı yükseklikte (32px).
· Menu radius 8px, shadow-lg, z-index --nb-z-popover (70); viewport'tan taşıyorsa otomatik üstte açılır.
· Boş durum: arama sonuç vermezse "yeni ekle" CTA'sı (varsa). Sadece "Sonuç yok" yazısı asla yeterli değil.
· Erişilebilirlik: ARIA combobox + listbox deseni; trigger'a aria-expanded, seçenek role="option" + aria-selected.