Form · Quantity stepper

Adet seçici

Eksi ve artı düğmeli sayı alanı. Küçük sayılar için: bilet, kişi, adet.

CSS: kararlı
JavaScript: artır, azalt
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Kişi sayısı

HTML kodunu göster

<div class="kiris-alan" data-kiris="adet">
  <label class="kiris-etiket" for="kisi-sayisi">Kişi sayısı</label>
  <div class="kiris-adet"><button class="kiris-adet__dugme" type="button" data-adet="eksi" aria-label="Bir azalt">−</button><input class="kiris-girdi kiris-adet__girdi" id="kisi-sayisi" name="kisi" type="text" inputmode="numeric" value="2" min="1" max="8"><button class="kiris-adet__dugme" type="button" data-adet="arti" aria-label="Bir artır">+</button></div>
</div>

Ne zaman kullanılır

1 ile 20 arası bir adet için kullanın.
Büyük sayılar için sayı girişi kullanın.

Erişilebilirlik

Alan yazılabilir. Düğmeler aria-label taşır: "Bir azalt", "Bir artır".
Sınırda düğme devre dışı kalır. Değer aria-live ile duyurulmaz, alan zaten odaktadır.

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

Kaynak

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

Bu bileşenin kodu depoda:

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