Form · Input group

Girdi grubu

Bir alanın başına veya sonuna birim, para işareti veya sabit metin ekler.

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

Örnekler

Sonek Canlı örnek

Tutar

Türk Lirası olarak, kuruşsuz.

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="tutar">Tutar</label>
  <p class="trds-yardim" id="tutar-yardim">Türk Lirası olarak, kuruşsuz.</p>
  <div class="trds-girdi-grubu">
    <input class="trds-girdi trds-girdi--10" id="tutar" name="tutar" type="text" inputmode="numeric" aria-describedby="tutar-yardim">
    <span class="trds-girdi-grubu__ek" aria-hidden="true">₺</span>
  </div>
</div>

Önek Canlı örnek

Katkı oranı

HTML kodunu göster

<div class="trds-alan">
  <label class="trds-etiket" for="oran">Katkı oranı</label>
  <div class="trds-girdi-grubu">
    <span class="trds-girdi-grubu__ek" aria-hidden="true">%</span>
    <input class="trds-girdi trds-girdi--4" id="oran" name="oran" type="text" inputmode="decimal">
  </div>
</div>

Ne zaman kullanılır

Tutar, yüzde, ağırlık veya alan gibi birimli bir değer isterken kullanın.
Eki alan içine yazmayın. Kullanıcı silebilir ve ekran okuyucu okuyamaz.

Erişilebilirlik

Ek aria-hidden="true" taşır. Birim etiket veya yardım metninde yazılır.
Ek, alanla aynı yükseklikte ve aynı kenarlıkta durur.

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: US, DE.