Ana içeriğe geç
Kiriş Türkiye kamu hizmetleri için tasarım sistemi

Geri bildirim · Error summary

Hata özeti

Sayfadaki tüm hataları en üstte toplar ve her birine bağlantı verir.

CSS
kararlı
JavaScript
odak yönetimi
React
kararlı
Vue
kararlı

Örnekler

Temel Canlı örnek

T.C. kimlik numarası 11 hane olmalıdır

Doğum tarihi bugünden sonra olamaz

HTML kodunu göster
<div class="kiris-hata-ozeti" data-kiris="hata-ozeti" role="alert" tabindex="-1">
  <h2 class="kiris-hata-ozeti__baslik">Bir sorun var</h2>
  <ul class="kiris-hata-ozeti__liste">
    <li><a href="#kimlik">T.C. kimlik numarası 11 hane olmalıdır</a></li>
    <li><a href="#dogum">Doğum tarihi bugünden sonra olamaz</a></li>
  </ul>
</div>

<div class="kiris-alan kiris-alan--hata">
  <label class="kiris-etiket" for="kimlik">T.C. kimlik numaranız</label>
  <p class="kiris-hata" id="kimlik-hata">T.C. kimlik numarası 11 hane olmalıdır</p>
  <input class="kiris-girdi kiris-girdi--11" id="kimlik" name="kimlik" type="text" inputmode="numeric" value="1234" aria-describedby="kimlik-hata" aria-invalid="true">
</div>

<div class="kiris-alan kiris-alan--hata">
  <label class="kiris-etiket" for="dogum">Doğum tarihiniz</label>
  <p class="kiris-hata" id="dogum-hata">Doğum tarihi bugünden sonra olamaz</p>
  <input class="kiris-girdi kiris-girdi--10" id="dogum" name="dogum" type="text" inputmode="numeric" value="01.01.2090" aria-describedby="dogum-hata" aria-invalid="true">
</div>

Ne zaman kullanılır

Erişilebilirlik

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, DK, NO.

Bu bileşenin kodu depoda: