Seçim · Radio

Seçenek düğmesi

Kullanıcının birbirini dışlayan seçeneklerden birini seçmesini sağlar.

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

Örnekler

Grup Canlı örnek

Başvuru türü

Bireysel

Kurumsal

HTML kodunu göster

<fieldset class="trds-alan-grubu">
  <legend class="trds-baslik-legend">Başvuru türü</legend>
  <div class="trds-secenekler">
    <div class="trds-secenek">
      <input class="trds-radyo" id="t1" name="tur" type="radio" value="bireysel">
      <label class="trds-secenek-etiket" for="t1">Bireysel</label>
    </div>
    <div class="trds-secenek">
      <input class="trds-radyo" id="t2" name="tur" type="radio" value="kurumsal">
      <label class="trds-secenek-etiket" for="t2">Kurumsal</label>
    </div>
  </div>
</fieldset>

Ne zaman kullanılır

Seçenekler birbirini dışlıyorsa kullanın.
6 seçeneğe kadar kullanın. Daha fazlası için açılır liste kullanın.
Hiçbir seçenek varsayılan olarak seçili gelmez.

Erişilebilirlik

Grubu fieldset ve legend içine alın.
Ok tuşları grup içinde gezinir. Bu tarayıcının kendi davranışıdır. Bozmayın.
Koşullu alan açan bir seçenek aria-expanded taşır.

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

Kaynak

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