Form · Input mask

Girdi maskesi

Yazarken boşluk ve ayraçları kendisi koyar. Kart numarası, referans numarası.

CSS: kararlı
JavaScript: biçimlendirme
React: kararlı
Vue: kararlı

Örnekler

Referans numarası Canlı örnek

Başvuru referans numarası

12 hane. Örnek: 2026 0450 1234

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="ref">Başvuru referans numarası</label>
  <p class="trds-yardim" id="ref-yardim">12 hane. Örnek: 2026 0450 1234</p>
  <input class="trds-girdi trds-girdi--20" id="ref" name="ref" type="text" inputmode="numeric" maxlength="14" data-trds="maske" data-maske="#### #### ####" aria-describedby="ref-yardim">
</div>

Ne zaman kullanılır

Sabit biçimli bir kod için kullanın. Kalıp # ile rakam yerini gösterir.
T.C. kimlik, IBAN, telefon ve plaka için kendi bileşenlerini kullanın. Onlar doğrular da.

Erişilebilirlik

Yardım metni biçimi örnekle söyler. Maske betik yoksa da alan çalışır.
Sunucu ham rakamları alır. Kullanıcı boşluklu yazsa da hata almaz.

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

Kaynak

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