ناحیه متن (Textarea)

معرفی

کامپوننت Textarea برای ورودی متن چند خطی استفاده می‌شود.

چه زمانی استفاده نکنیم:

• برای ورودی تک‌خطی — از Input استفاده کنید
• برای محتوای Rich Text (bold، italic، لیست) — به ادیتور نیاز دارید
• برای ورودی‌هایی با حجم خیلی زیاد (مثل paste کردن JSON) — از کامپوننت مخصوص استفاده کنید

استفاده

import { Textarea } from '@parto-system-design/ui'

<Textarea placeholder="متن خود را وارد کنید..." />

زمین بازی

با تغییر تنظیمات زیر، ناحیه متن را به صورت زنده مشاهده کنید.

import { Textarea } from '@parto-system-design/ui'

<Textarea />

با Label

import { Textarea, Label } from '@parto-system-design/ui'
;<div className="grid gap-2">
  <Label htmlFor="message">پیام</Label>
  <Textarea id="message" placeholder="پیام خود را بنویسید..." rows={4} />
</div>

غیرفعال

<Textarea disabled placeholder="این فیلد غیرفعال است" />

با خطا

<Textarea aria-invalid="true" placeholder="مقدار اجباری است" />

حالت‌ها و انواع

حالت‌های مختلف

<div className="flex flex-col gap-4 max-w-sm" dir="rtl">
  <Textarea placeholder="متن پیش‌فرض" />
  <Textarea placeholder="غیرفعال" disabled />
  <Textarea placeholder="فقط خواندنی" readOnly defaultValue="این متن فقط خواندنی است" />
  <Textarea placeholder="با خطا" aria-invalid="true" />
</div>

راهنمای استفاده

Props

دسترسی‌پذیری

• از id و Label[htmlFor] برای اتصال برچسب به فیلد استفاده کنید
• در حالت خطا، aria-invalid="true" را تنظیم کنید تا screen reader وضعیت را اعلام کند
• از aria-describedby برای اتصال پیام خطا یا راهنمایی استفاده کنید

کامپوننت‌های مرتبط

• Input — اگر نیاز به ورودی تک‌خطی دارید، از Input استفاده کنید
• Field — اگر نیاز به Textarea با label و validation message دارید، از Field استفاده کنید