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="trds-alan" data-trds="adet">
  <label class="trds-etiket" for="kisi-sayisi">Kişi sayısı</label>
  <div class="trds-adet"><button class="trds-adet__dugme" type="button" data-adet="eksi" aria-label="Bir azalt">−</button><input class="trds-girdi trds-adet__girdi" id="kisi-sayisi" name="kisi" type="text" inputmode="numeric" value="2" min="1" max="8"><button class="trds-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.