البناء · جديد

منطقة النص

حقل نص متعدد الأسطر للإجابات الأطول، كالملاحظات والأوصاف والرسائل، بتسمية حقل الإدخال ونصه المساعد وحالاته، مع عدّاد للأحرف ومقبض لتغيير الارتفاع.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/textarea

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { Textarea } from "@/components/ui/textarea";

<Textarea label="Note to recipient" limit={200} helperText="The recipient sees this note." />

أمثلة

الحالات

الحالات والألوان نفسها في حقل الإدخال. اجعل الارتفاع مناسبًا للإجابة المتوقعة: من 3 إلى 6 أسطر (rows).

عدّاد الأحرف

limit يُظهر «37/100» بأرقام الصفحة. تجاوز الحد مسموح: يحمرّ العدّاد ويظهر السبب تحت الحقل، فلا يُقطع النص دون رسالة. قارئ الشاشة يسمع «بقي 10 حرفًا» قرب الحد فقط.

تغيير الارتفاع

resize: ‏vertical (مقبض Figma، الافتراضي) أو auto (يكبر مع النص حتى maxRows) أو none.

مرجع الخصائص

Textarea

يقبل كل خصائص <textarea> أيضًا.

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label.
`limit`	`number`		خاصية Counter: العدّاد والحد، دون قطع النص.
`limitMessage`	`string`		رسالتك عند تجاوز الحد. الافتراضي بلغة الصفحة.
`resize`	`"vertical" \| "auto" \| "none"`	`"vertical"`	مقبض Figma، أو يكبر مع النص، أو ثابت.
`rows`	`number`	`4`	عدد الأسطر الظاهرة.
`maxRows`	`number`		مع `resize="auto"`: أقصى عدد أسطر قبل التمرير.
`required / helperText / error / disabled / readOnly`	`…`		كما في حقل الإدخال.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينقل التركيز إلى الحقل؛ Enter يضيف سطرًا.

ARIA

عنصر <textarea> حقيقي بتسمية، والنص المساعد والعدّاد مرتبطان عبر aria-describedby.
قرب الحد (20 و10 و5 و0 أحرف) وعند تجاوزه يُعلَن الباقي بهدوء، لا مع كل حرف.
تجاوز الحد يضع aria-invalid ويُظهر السبب.
مقبض تغيير الارتفاع للمؤشر واللمس فقط ومخفي عن قارئ الشاشة؛ resize="auto" بديل لا يحتاج سحبًا.

ملاحظات العربية والاتجاه

ينعكس

العدّاد والمقبض في نهاية السطر (أسفل اليسار)، والمقبض ينعكس ليشير إلى الزاوية.

لا ينعكس

العدّاد «37/100» معزول من اليسار إلى اليمين.

الأرقام: العدّاد يتبع numerals: ‏٣٧/١٠٠ أو 37/100.
الخط العربي: النص body-16 بارتفاع سطر أطول في العربية، فيتسع السطر الواحد للحركات.
النص ثنائي الاتجاه: الحقل يأخذ dir="auto": ملاحظة إنجليزية في نموذج عربي تجري من اليسار وتبقى علامة ترقيمها في آخرها.

كل المكونات ›