Form · Select

Açılır liste

Kullanıcının bir listeden tek bir seçenek seçmesini sağlar.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

İl

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="il">İl</label>
  <select class="trds-secim" id="il" name="il">
    <option value="">Seçiniz</option>
    <option value="34">İstanbul</option>
    <option value="06">Ankara</option>
    <option value="35">İzmir</option>
    <option value="16">Bursa</option>
  </select>
</div>

Ne zaman kullanılır

Seçenek sayısı 7 ile 20 arasındaysa kullanın.
6 seçenekten azsa seçenek düğmesi kullanın.
20 seçenekten çoksa aranabilir liste kullanın.

Erişilebilirlik

İlk seçenek bir yönerge değil boş bir değer olur.
Seçenekleri alfabetik değil mantıklı bir sırayla dizin.
Türkçe sıralamada ç, ğ, ı, i, ö, ş ve ü harflerini doğru sıraya koyun.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 3.3.2 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE, NO.