Form · Number input

Sayı girişi

Sayı için tek satırlık alan. Metin türü ve sayısal klavye kullanır, sayı türü kullanmaz.

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

Örnekler

Tam sayı Canlı örnek

Hanede yaşayan kişi sayısı

HTML kodunu göster

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

Ondalık Canlı örnek

Arsa alanı

Metrekare. Ondalık için virgül kullanın: 245,5

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="alan">Arsa alanı</label>
  <p class="trds-yardim" id="alan-yardim">Metrekare. Ondalık için virgül kullanın: 245,5</p>
  <div class="trds-girdi-grubu">
    <input class="trds-girdi trds-girdi--10" id="alan" name="alan" type="text" inputmode="decimal" aria-describedby="alan-yardim">
    <span class="trds-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.5 3.3.2

Kaynak

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