Textarea

Ne zaman kullanılır

Textarea, birden çok satır sürebilecek serbest metin içindir: açıklama, gerekçe, not, geri bildirim.

Ne zaman kullanılmaz

• Tek satırlık değer için: Ad, e-posta, kısa başlık için TextInput kullanın.
• Biçimli metin için: Kalın, liste ya da bağlantı gerekiyorsa zengin metin düzenleyicisi gerekir; Textarea düz metin alır.
• Seçenekler arasından seçim için: Seçim denetimleri kullanın.

Anatomi

Alan etiketi

Yardım metni burada yer alır.

AçıkKoyu

Kodu kopyala

import { Textarea } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <Textarea label="Alan etiketi" description="Yardım metni burada yer alır." />
    </div>
  );
}

1. Etiket: Field etiketi; gerektiğinde zorunluluk işareti.
2. Metin alanı: <textarea>; rows satır yüksekliği, body-md yazı stili.
3. Sayaç: İsteğe bağlı; showCount ile, sağa yaslı.
4. Yardım metni: description.
5. Hata: error; bir ya da birden çok mesaj.

Davranış

• rows en küçük yüksekliği verir; kullanıcı alanı dikey olarak büyütebilir.
• Varsayılan olarak yükseklik içerikle büyür (autoResize, field-sizing: content), maxRows satırda durur ve alan kayar. autoResize={false} dikey boyutlandırma tutamaçlı sabit yükseklik verir.
• Sayaç yazmayı engellemez; sınır aşılınca alan aria-invalid alır ve sayaç tehlike rengine geçer.
• Kontrolsüz kullanımda sayaç değeri kendi izler; kontrollü kullanımda value ve onValueChange verin.
• readOnly alan odak alır ve formla gönderilir; disabled alan gönderilmez.

Yönergeler

• Alanın yüksekliğini beklenen metin boyuna göre seçin; kısa notlar için 2–3 satır yeterlidir.
• Sınır varsa sayacı gösterin; sınırı yardım metninde de yazın.
• Mobilde autoResize açık kalsın, maxRows={5} kullanın.
• Yer tutucuya talimat yazmayın; talimat yardım metnindedir.

İçerik

• Etiket alanın ne için olduğunu söyler: “Açıklama”, “Gerekçe”.
• Hata mesajı ne yapılacağını söyler: “En fazla 500 karakter girin.”

Türkçe	İngilizce
2 karakter kaldı	2 characters left
2 karakter fazla	2 characters too many

İlgili bileşenler

• TextInput: Tek satırlık metin girdisi.
• Field: Etiket, yardım metni, hata ve sayaç bağlantısı.
• Label: Field dışı etiket.