Form · Time input

Saat girişi

Saat ve dakika için iki kısa alan. Tarih girişiyle aynı kalıp.

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

Örnekler

Temel Canlı örnek

Randevu saati

24 saat biçimi. Örnek: 14 30

Saat

Dakika

HTML kodunu göster

<fieldset class="kiris-alan-grubu">
  <legend class="kiris-baslik-legend">Randevu saati</legend>
  <p class="kiris-yardim" id="saat-yardim">24 saat biçimi. Örnek: 14 30</p>
  <div class="kiris-saat" aria-describedby="saat-yardim">
    <div class="kiris-saat__parca"><label class="kiris-etiket kiris-etiket--kucuk" for="saat">Saat</label><input class="kiris-girdi kiris-girdi--2" id="saat" name="saat" type="text" inputmode="numeric" maxlength="2"></div>
    <span class="kiris-saat__ayrac" aria-hidden="true">:</span>
    <div class="kiris-saat__parca"><label class="kiris-etiket kiris-etiket--kucuk" for="dakika">Dakika</label><input class="kiris-girdi kiris-girdi--2" id="dakika" name="dakika" type="text" inputmode="numeric" maxlength="2"></div>
  </div>
</fieldset>

Ne zaman kullanılır

Randevu saati veya olay saati isterken kullanın.
Saat seçici açılır liste kullanmayın. Yazmak daha hızlıdır.

Erişilebilirlik

Alan grubu <fieldset> ve <legend> ile etiketlenir.
24 saat biçimi kullanılır. Yardım metni "Örnek: 14 30" der.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 3.3.2

Kaynak

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

Bu bileşenin kodu depoda:

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