Textarea

کامپوننت Textarea برای دریافت متن‌های چندخطی از کاربر استفاده می‌شود؛ مثل توضیحات، دیدگاه‌ها و پیام‌ها. بر پایه‌ی تگ استاندارد <textarea> ساخته شده و قابلیت‌هایی مثل تغییر اندازه‌ی خودکار دارد.

Import

import { Textarea } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Textarea placeholder="توضیحات خود را بنویسید..." rows={4} />

Controlled Usage

import { useState } from "react";

function CommentBox() {
  const [comment, setComment] = useState("");

  return (
    <>
      <Textarea
        value={comment}
        onChange={(event) => setComment(event.target.value)}
        placeholder="نظر خود را بنویسید..."
        rows={4}
        maxLength={500}
      />
      <small>{comment.length} / ۵۰۰</small>
    </>
  );
}

Playground

error

disabled

resizable

autoResize

placeholder

<Textarea placeholder="توضیحات خود را بنویسید..." rows={4} />

Error State

با فعال‌کردن error، حاشیه‌ی ورودی قرمز می‌شود؛ برای نمایش خطای اعتبارسنجی فرم استفاده کن.

Resizing

• به‌صورت پیش‌فرض کاربر می‌تواند اندازه‌ی textarea را با کشیدن گوشه‌ی آن تغییر دهد (resizable = true).
• با resizable={false} این قابلیت حذف می‌شود.
• با autoResize ارتفاع textarea پس از تغییر value به‌صورت خودکار با محتوا هماهنگ می‌شود و اسکرول داخلی حذف می‌شود. برای این قابلیت از الگوی controlled استفاده کن:

function AutoGrowingMessage() {
  const [message, setMessage] = useState("");

  return (
    <Textarea
      value={message}
      onChange={(event) => setMessage(event.target.value)}
      autoResize
      resizable={false}
      rows={2}
      placeholder="پیام شما..."
    />
  );
}

Accessibility

• برای دسترسی‌پذیری کامل، همیشه یک <label> مرتبط (با htmlFor) یا aria-label برای هر Textarea در نظر بگیر — فقط placeholder جایگزین مناسبی برای برچسب نیست.
• در حالت error، بهتر است aria-invalid="true" هم روی textarea تنظیم شود.

Data Attributes and Customize CSS

Textarea روی خود عنصر native این attributeها را قرار می‌دهد:

Attribute	کاربرد
data-fara-textarea	hook اصلی textarea
data-error	در حالت error={true} مقدار true دارد

<Textarea className="profile-bio" error aria-invalid="true" />

[data-fara-textarea] {
  min-height: 120px;
}

[data-fara-textarea][data-error] {
  border-color: #dc2626;
}

[data-fara-textarea]:disabled {
  opacity: 0.6;
}

className مستقیماً روی textarea اعمال می‌شود و می‌تواند برای یک نمونه‌ی خاص یا layout استفاده شود.

Props

Prop	Type	Default	Description
error	boolean	false	نمایش حالت خطا (حاشیه‌ی قرمز)
resizable	boolean	true	اجازه‌ی تغییر اندازه توسط کاربر
autoResize	boolean	false	تنظیم خودکار ارتفاع با محتوا
className	string	-	کلاس CSS اضافی برای سفارشی‌سازی
ref	Ref<HTMLTextAreaElement>	-	دسترسی مستقیم به المان DOM

علاوه بر موارد بالا، تمام ویژگی‌های استاندارد <textarea> (مثل value, onChange, placeholder, rows, disabled, aria-* و ...) نیز پشتیبانی می‌شوند.