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="kiris-cip-grubu" data-kiris="cip">
  <button class="kiris-cip" type="button" aria-pressed="true">Emekli</button>
  <button class="kiris-cip" type="button" aria-pressed="false">Çalışan</button>
  <button class="kiris-cip" type="button" aria-pressed="false">İşveren</button>
  <span class="kiris-cip kiris-cip--secili">Ankara<button class="kiris-cip__kaldir" type="button" aria-label="Ankara’yı kaldır"><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-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.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-chip ile başlayan sınıflar
Davranış betiği, data-kiris="cip" başlatıcısı