M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Seçim kutusu select

bilinen diğer adları select · dropdown · açılır liste · combobox (aranabilir hâli)

Böyle diyorsan: "aşağı açılan seçenekli kutu" · "il seçme kutusu" → bunun adı seçim kutusu.

Listeden tek seçenek seçtiren açılır kutu.

Seçim kutusu, bir listeden tek değer seçtirir ve seçenekleri kapalı tutar. Bu maddenin en pahalı kararı şudur: yerleşik <select> çirkin bulunur ve sık sık div'lerle yeniden yazılır. Oysa yerleşik olan mobilde işletim sisteminin kendi seçicisini açar, klavyede bir harfe basınca o harfle başlayan seçeneğe atlar, ekran okuyucuyla çalışır ve sıfır bakım ister. Taklit edilen sürüm bunların hepsini elle yazmayı gerektirir; çoğu proje yarısını eksik yazar ve fark yalnızca klavye ya da ekran okuyucu kullanan birinde ortaya çıkar. Seçenek sayısı arttıkça (yaklaşık on üstü) kapalı liste yetmez, aranabilir hâline geçmek gerekir.

Kapsam: Bu madde listeden tek DEĞER seçimini kapsar. Az sayıda ve karşılaştırılacak seçenek varsa Seçenek Düğmesi doğrudur; eylem listeleyen açılır menü ise ayrı bir parçadır (Açılır Menü).

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Şehir
İstanbul▴
Ankaraİstanbul ✓İzmir
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Şehir seçimi ekle: label bağlı; 10+ seçenek olduğu için aranabilir combobox (yazdıkça filtrelenen 81 il), placeholder 'Seçiniz' seçilemez-disabled, seçili il ✓ ile işaretli; kayda ekranda görünen ad değil il ID/plaka kodu gitsin; mobilde native seçiciye düşmek kabul edilebilir bir yedek olsun.
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Select'im huysuz; klasikleri sırayla ele: (1) 81 il native select'te — arama yok, kullanıcı kaydırmaktan vazgeçiyor (combobox gerekliydi); (2) 'Seçiniz' gerçek bir değer olarak kaydedilebiliyor (disabled değil); (3) kayda id değil görünen METİN gidiyor — 'İstanbul' yazımı değişince veri kırılıyor; (4) klavye harf-atlama çalışmıyor; (5) custom listede klavye/ekran okuyucu tamamen kör (role=listbox yok). Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Etiket<label>

    Alanın adı; select'e bağlı.

  • 2Kapalı tetikseçili değeri gösterir

    Kutunun kapalı yüzü; 'Seçiniz' placeholder'ı SEÇİLEBİLİR bir değer olmamalı (disabled).

  • 3Açık liste<option> / listbox

    Seçenekler; 10'dan fazlaysa arama kutusu şarttır (combobox) — 81 ilde kaydırma işkencedir.

  • 4Seçili işaret✓ + vurgu

    Mevcut seçimin listede belli olması; klavyede harfe basınca o harfe atlama beklenir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalı / boş<option disabled selected>

    Henüz seçilmedi. 'Seçiniz' bir seçenek gibi durmamalı: disabled olmalı ki kullanıcı onu geçerli bir değer olarak seçemesin.

  • BAçıkliste görünür

    Seçenekler listelenir. Mobilde yerleşik select işletim sisteminin kendi seçicisini açar — bu, taklit sürümlerin kaybettiği en büyük kazançtır.

  • CSeçiliselected

    Kapalı yüz seçili değeri gösterir. Listede de işaretle belli olmalı; klavyede harfe basınca o harfe atlama beklentisi korunur.

  • DÇoklu seçimmultiple

    Yerleşik çoklu select kullanışsızdır (Ctrl ile tıklama bilinmez). Çoklu seçim gerekiyorsa onay kutusu listesi ya da çip tabanlı bir çözüm daha dürüsttür.

  • EDevre dışıdisabled

    Seçim yapılamaz. Sebebi yazılmazsa kullanıcı arayüzün bozuk olduğunu düşünür — özellikle bağımlı alanlarda ('önce il seç').

KODDAKİ ADLARI
HTML<select> + <option disabled>native temel
HTML<optgroup>uzun listeyi başlıklara böler
ARIArole=combobox + listbox/optionaranabilir desen
shadcn/uiCombobox (Command)hazır aranabilir seçim
ERİŞİLEBİLİRLİK & SIK HATA
  • Mümkünse yerleşik <select> kullan. Klavye gezinme, harfe atlama, mobil yerli seçici ve ekran okuyucu desteği bedava gelir; taklit ederken bunların hepsini yeniden yazman gerekir.
  • 'Seçiniz' satırını disabled yap, yoksa geçerli bir değer olarak seçilebilir ve boş veri kaydedilir.
  • Yaklaşık on seçenekten sonra arama şart. Seksen bir ili kaydırarak bulmak, klavye ve motor güçlüğü olan kullanıcılar için gerçek bir engeldir; aranabilir desene (combobox) geç.
  • Uzun listeleri <optgroup> ile başlıklara böl; ekran okuyucu grup adını da okur.
  • Taklit bir seçim kutusu yazacaksan APG'nin combobox kalıbını uygula: ok tuşları, Escape ile kapanma, odak yönetimi ve aria bağları eksiksiz olmalı.
SIK KARIŞTIRILANLAR

Seçenek düğmesinden farkı. İkisi de gruptan tek seçim yaptırır; ayrım GÖRÜNÜRLÜKTE. Seçim kutusu seçenekleri saklar ve yer kazandırır; seçenek düğmeleri hepsini aynı anda gösterir ve karşılaştırmayı mümkün kılar. Pratik kural: yaklaşık beşe kadar ve seçenekler karşılaştırılacaksa seçenek düğmesi; uzun ve tanıdık listelerde (ülke, il) seçim kutusu.

Seçenek düğmesi sayfasına git →

Açılır menüden farkı. Görünüşleri neredeyse aynıdır, işleri tamamen farklıdır: açılır menü EYLEM listeler (Düzenle, Sil, Paylaş) ve seçilen şey hemen çalışır; seçim kutusu ise DEĞER tutar ve o değer formla birlikte gider. Menüden bir şey seçmek bir işi yapar, seçim kutusundan bir şey seçmek bir cevabı belirler. Karıştırıldığında ortaya 'Sil'i seçip Kaydet'i bekleyen bir kullanıcı çıkar.

Açılır menü sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Seçenek düğmesi radioAçılır menü dropdownArama çubuğu search barForm alanı form field

AYNI AİLEDE · GIRDI