# Textarea

حقل نص متعدد الأسطر يمكن للمستخدم تغيير حجمه. ثلاث تعبئات وكل الحالات: التمرير والتركيز والتعبئة والقراءة فقط والتعطيل والخطأ.

<Preview name="textarea-states" title="حالات حقل النص المتعدد" />

## التثبيت

<ComponentInstall name="textarea" />

ويثبّت [Field](/ar/docs/components/field) أيضًا.

## الاستخدام

```tsx title="page.tsx"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function DetailsField() {
  return (
    <Field name="details">
      <FieldLabel required>تفاصيل الطلب</FieldLabel>
      <Textarea required rows={4} />
      <FieldDescription>اذكر رقم القطعة واسم الشارع.</FieldDescription>
    </Field>
  );
}
```

استخدم Textarea للإجابات التي تحتاج أكثر من سطر: الأوصاف والتعليقات والأسباب. اضبط `rows` للارتفاع الابتدائي. اذكر الحد الأقصى في النص المساعد، ولا تقتطع النص بصمت.

## البنية

- **Textarea** (`<textarea>`): الحد والتعبئة والنص ومقبض تغيير الحجم في عنصر واحد.
- شريط التمرير هو شريط المتصفح نفسه؛ يظهر عندما يزيد النص عن ارتفاع الصندوق.

## أمثلة

### الحالات

الافتراضية والمعبأة وللقراءة فقط والمعطّلة وحالة الخطأ، مع التعبئة الأغمق دون تغيير الحجم.

<Preview name="textarea-states" title="الحالات" />

### تغيير الحجم

`resize="vertical"` (الافتراضي) يعرض مقبضًا في زاوية النهاية. استخدم `resize="none"` عندما يتطلب التخطيط ارتفاعًا ثابتًا. ولا يتغير عرض الحقل جانبيًا أبدًا.

```tsx title="page.tsx"
<Textarea resize="none" rows={6} />
```

## RTL

يبدأ النص من اليمين ويقع مقبض تغيير الحجم في الزاوية السفلية اليسرى. ويتبع كل شيء اتجاه الصفحة.

<DirectionCompare name="textarea-states" title="حقل النص المتعدد" />

## إمكانية الوصول

| المفتاح | الإجراء |
| --- | --- |
| <kbd>Tab</kbd> | ينقل التركيز إلى الحقل. |
| <kbd>Enter</kbd> | يبدأ سطرًا جديدًا. |

- عنصر `<textarea>` أصلي مرتبط بتسمية [Field](/ar/docs/components/field) ونصه المساعد وخطئه.
- الحالات نفسها كما في [Input](/ar/docs/components/input): ينمو الخط السفلي من الوسط عند الضغط (نصفًا) وعند التركيز (كاملًا)، ولا يوجد حد خارجي. ويحمل عنصر `<div>` الغلاف الحد والخط السفلي لأن `<textarea>` لا يستطيع رسمهما.
- يمكن سحب مقبض تغيير الحجم بالمؤشر. ويحصل مستخدمو لوحة المفاتيح على المساحة نفسها بالكتابة؛ أعطِ `rows` ارتفاعًا يكفي للإجابة المتوقعة.
- إن عرضت حدًا للأحرف فضعه في النص المساعد واستخدم `maxLength` ليُفرض.

## مرجع API

<ApiReference component="textarea" />

## الاختلافات عن DGA

- في Figma نسخة واحدة بارتفاع ثابت. أما هذا الحقل فيكبر بحسب `rows` ويمكن تغيير حجمه.
- لا حدّ للتعبئتين الأفتح والأغمق في حالة السكون، كما في [Input](/ar/docs/components/input)، بما في ذلك الفجوة المعروفة.

<ComponentDeviations component="textarea" />

## التباين

<ComponentContrast component="textarea" />


---

[فهرس كل الصفحات](https://dga.omqkhafi.dev/ar/llms.txt)