Seçim · Segmented control

Bölümlü seçim

İki ile dört seçenek, yan yana ve tek satırda. Görünüm veya sıralama seçmek için.

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

Örnekler

Üç seçenek Canlı örnek

Görünüm Liste Harita Takvim

HTML kodunu göster

<fieldset class="trds-bolumlu">
  <legend class="trds-gorsel-gizli">Görünüm</legend>
  <input class="trds-gorsel-gizli" type="radio" name="gorunum" id="gorunum-1" value="liste" checked><label for="gorunum-1">Liste</label>
  <input class="trds-gorsel-gizli" type="radio" name="gorunum" id="gorunum-2" value="harita"><label for="gorunum-2">Harita</label>
  <input class="trds-gorsel-gizli" type="radio" name="gorunum" id="gorunum-3" value="takvim"><label for="gorunum-3">Takvim</label>
</fieldset>

Ne zaman kullanılır

Liste ve harita gibi iki görünüm arasında geçiş için kullanın.
Beş üstü seçenek için seçenek düğmesi veya açılır liste kullanın.

Erişilebilirlik

Seçenek düğmesi kalıbıdır: radio ve label. Ok tuşları gezer.
Seçili olan yalnız renkle değil, kalın metinle de belli olur.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NO, FR.