ناحیه متن (Textarea)

معرفی

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

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

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

استفاده

import { Textarea } from '@partodata/ui'

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

زمین بازی

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

import { Textarea } from '@partodata/ui'

<Textarea />

اندازه‌ها

<Textarea size="xs" placeholder="اندازه xs" />
<Textarea size="sm" placeholder="اندازه sm" />
<Textarea size="md" placeholder="اندازه md (پیش‌فرض)" />
<Textarea size="lg" placeholder="اندازه lg" />
<Textarea size="xl" placeholder="اندازه xl" />

مقیاس استاندارد 5 سطحی سیستم طراحی (xs تا xl) اکنون در دسترس است — همسو با Input، برای زمانی که یک پنل فیلتر فشرده با ورودی‌های size="xs" نیاز به Textarea در همان تراز دارد.

با Label

import { Textarea, Label } from '@partodata/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 استفاده کنید