Seçim · Chip

Seçim etiketi

Basılabilen küçük etiket. Süzgeç seçmek veya seçileni kaldırmak için.

CSS: kararlı
JavaScript: kaldırma
React: kararlı
Vue: kararlı

Örnekler

Süzgeç ve seçili Canlı örnek

Ankara

HTML kodunu göster

<div class="trds-cip-grubu" data-trds="cip">
  <button class="trds-cip" type="button" aria-pressed="true">Emekli</button>
  <button class="trds-cip" type="button" aria-pressed="false">Çalışan</button>
  <button class="trds-cip" type="button" aria-pressed="false">İşveren</button>
  <span class="trds-cip trds-cip--secili">Ankara<button class="trds-cip__kaldir" type="button" aria-label="Ankara’yı kaldır"><svg class="trds-simge" aria-hidden="true"><use href="#edk-close"/></svg></button></span>
</div>

Ne zaman kullanılır

Arama sonucunu süzerken ve çoklu seçimde seçilenleri göstermek için kullanın.
Durum göstermek için etiket kullanın. Etiket basılmaz.

Erişilebilirlik

Süzgeç etiketi bir button ve aria-pressed taşır.
Kaldırma düğmesi görsel gizli metinle neyi kaldırdığını söyler: "Ankara’yı kaldır".

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NO, IE, FI, IT, JP, CH.