Textarea

التثبيتنسخ رابط العنوان

ويثبّت Field أيضًا.

الاستخدامنسخ رابط العنوان

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>): الحد والتعبئة والنص ومقبض تغيير الحجم في عنصر واحد.
• شريط التمرير هو شريط المتصفح نفسه؛ يظهر عندما يزيد النص عن ارتفاع الصندوق.

أمثلةنسخ رابط العنوان

الحالاتنسخ رابط العنوان

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

تغيير الحجمنسخ رابط العنوان

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

<Textarea resize="none" rows={6} />

RTLنسخ رابط العنوان

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

إمكانية الوصولنسخ رابط العنوان

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

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• في Figma نسخة واحدة بارتفاع ثابت. أما هذا الحقل فيكبر بحسب rows ويمكن تغيير حجمه.
• لا حدّ للتعبئتين الأفتح والأغمق في حالة السكون، كما في Input، بما في ذلك الفجوة المعروفة.

التبايننسخ رابط العنوان