Sayı girişi

Örnekler

<div class="kiris-alan">
  <label class="kiris-etiket" for="kisi">Hanede yaşayan kişi sayısı</label>
  <input class="kiris-girdi kiris-girdi--2" id="kisi" name="kisi" type="text" inputmode="numeric" pattern="[0-9]*">
</div>

<div class="kiris-alan">
  <label class="kiris-etiket" for="alan">Arsa alanı</label>
  <p class="kiris-yardim" id="alan-yardim">Metrekare. Ondalık için virgül kullanın: 245,5</p>
  <div class="kiris-girdi-grubu">
    <input class="kiris-girdi kiris-girdi--10" id="alan" name="alan" type="text" inputmode="decimal" aria-describedby="alan-yardim">
    <span class="kiris-girdi-grubu__ek" aria-hidden="true">m²</span>
  </div>
</div>

Ne zaman kullanılır

• Adet, yıl veya tutar gibi bir sayı isterken kullanın.
• Kimlik numarası, plaka veya posta kodu için kullanmayın. Onlar sayı değil koddur.

Erişilebilirlik

• type="text" ve inputmode="numeric" kullanılır. type="number" fare tekerleğiyle değeri değiştirir ve ekran okuyucuda sorun çıkarır. GOV.UK aynı kararı verdi.
• Ondalık için inputmode="decimal" kullanın. Türkçede ondalık ayracı virgüldür, sunucu ikisini de kabul eder.
• Alan genişliği beklenen hane sayısına göre daraltılır.

Karşılanan WCAG 2.2 ölçütleri 1.3.53.3.2

Kaynak

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

Bu bileşenin kodu depoda:

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