Seçim · Switch

Anahtar

Bir ayarı açar veya kapatır. Etkisi hemen görülür, form gönderimi beklemez.

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

Örnekler

Temel Canlı örnek

Başvuru durumu değişince SMS gönder

HTML kodunu göster

<div class="kiris-anahtar">
  <input class="kiris-anahtar__girdi" id="bildirim" name="bildirim" type="checkbox" role="switch">
  <label class="kiris-anahtar__etiket" for="bildirim">
    <span class="kiris-anahtar__yol" aria-hidden="true"></span>
    <span>Başvuru durumu değişince SMS gönder</span>
  </label>
</div>

Ne zaman kullanılır

Bildirim ayarı gibi anında etkili bir açık ve kapalı seçimi için kullanın.
Bir formun parçası olan seçim için onay kutusu kullanın. Anahtar gönderim beklemez.

Erişilebilirlik

Yerel bir onay kutusu role="switch" taşır. JavaScript gerekmez, klavye ve ekran okuyucu tarayıcıdan gelir.
Etiket durumu yazmaz. "Bildirim gönder" der, "açık" veya "kapalı" demez. Durumu tarayıcı okur.
Anahtar en az 44 piksel dokunma alanına sahiptir.

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: FR, KR, JP, DK, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-switch ile başlayan sınıflar