Textarea

Yorum, açıklama ve mesajlar için çok satırlı bir metin girişi. Bir Field içinde kullanıldığında id'sini, açıklamasını, hatasını ve zorunlu state'ini oradan alır.

<Textarea aria-label="Mesaj" placeholder="Bir mesaj yaz…" />

Import

import { Textarea } from "@merid/react";

Örnekler

Boyutlandırma

Boyutlandırma tutamacı varsayılan olarak vertical'dır. Layout'un değişmemesi gerekiyorsa none kullan, both'u ise nadiren.

<Textarea rows={2} placeholder="resize vertical (varsayılan)" />
<Textarea rows={2} resize="none" placeholder="resize none" />
<Textarea rows={2} resize="both" placeholder="resize both" />

Geçersiz ve devre dışı

<Textarea rows={2} invalid defaultValue="Çok kısa" />
<Textarea rows={2} disabled defaultValue="Devre dışı" />

Sayaçlı controlled kullanım

const [value, setValue] = useState("");

<Textarea
aria-label="Durum"
value={value}
maxLength={140}
onChange={(event) => setValue(event.target.value)}
/>
<Text size="xs" tone="muted" numeric>{value.length} / 140</Text>

API referansı

Textarea ref'ini <textarea>'ya iletir ve diğer tüm native attribute'ları olduğu gibi geçirir.

Stil verme

Textarea, input.css içindeki Input stillerini paylaşır; boyut varyantı yoktur.

Erişilebilirlik

• Field ya da Label ile görünür bir etiket ver.
• Karakter sayacı gösteriyorsan maxLength ile görünen sayıyı senkron tut; sayacı aria-describedby ile bağlamayı düşün.

Kullanım ilkeleri

İlgili sayfalar

• Input: tek satırlık metin.
• Field: etiket, açıklama ve hata bağlantısı.