Seçim · Checkbox

Onay kutusu

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

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

Örnekler

Grup Canlı örnek

Hangi belgeleri yükleyeceksiniz?

Kimlik fotokopisi

İkametgâh belgesi

HTML kodunu göster

<fieldset class="trds-alan-grubu">
  <legend class="trds-baslik-legend">Hangi belgeleri yükleyeceksiniz?</legend>
  <div class="trds-secenekler">
    <div class="trds-secenek">
      <input class="trds-onay" id="b1" name="belge" type="checkbox" value="kimlik">
      <label class="trds-secenek-etiket" for="b1">Kimlik fotokopisi</label>
    </div>
    <div class="trds-secenek">
      <input class="trds-onay" id="b2" name="belge" type="checkbox" value="ikametgah">
      <label class="trds-secenek-etiket" for="b2">İkametgâh belgesi</label>
    </div>
  </div>
</fieldset>

Ne zaman kullanılır

Birden çok seçim mümkünse kullanın.
Tek bir evet ve hayır sorusu için tek onay kutusu kullanın.
Seçenekler birbirini dışlıyorsa seçenek düğmesi kullanın.

Erişilebilirlik

Etiketin tamamı tıklanabilir alandır.
Kutu 24 x 24 piksel, dokunma alanı 44 x 44 pikseldir.
Grubu fieldset ve legend içine alın.

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

Kaynak

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