Form · Textarea

Çok satırlı metin

Kullanıcının birden çok satır metin girmesini sağlar.

CSS: kararlı
JavaScript: karakter sayacı
React: kararlı
Vue: kararlı

Örnekler

Karakter sayacı ile Canlı örnek

Başvuru gerekçeniz

200 karakter kaldı

HTML kodunu göster

<div class="trds-alan" data-trds="karakter-sayaci" data-sinir="200">
  <label class="trds-etiket" for="aciklama">Başvuru gerekçeniz</label>
  <textarea class="trds-metin-alani" id="aciklama" name="aciklama" rows="5" aria-describedby="aciklama-sayac"></textarea>
  <p class="trds-sayac" id="aciklama-sayac" aria-live="polite">200 karakter kaldı</p>
</div>

Ne zaman kullanılır

Açıklama, gerekçe veya adres gibi uzun bir metin için kullanın.
Bir sınır varsa karakter sayacını açın.

Erişilebilirlik

Karakter sayacı aria-live="polite" ile duyurulur.
Sayaç yalnız son 20 karakterde duyurulur. Her tuşta duyurmayın.
Alanı kullanıcı büyütebilir. resize: none kullanmayın.

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

Kaynak

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