منطقة النص (Textarea)

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

التثبيت

bash

npx @smicolon/fasla-ui@latest add textarea

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

ملاحظات التوصيل

يرى المندوب ملاحظتك عند وصوله.

الأنماط (variant)

ملاحظات التوصيل

رسالة الهدية

تتسع لها البطاقة.

صف المشكلة

اكتب 20 حرفًا على الأقل لنتمكن من مساعدتك.

ملاحظات الطلب

تُقفل الملاحظات بعد شحن الطلب.

تعليمات التغليف

اختياري

نغلّف الهدايا مجانًا.

الارتفاع

يبدأ الحقل بارتفاع 60px، ثم يزداد سطرًا بعد سطر كلما طال النص، فيبقى النص كله ظاهرًا. ولزيادة ارتفاعه بنفسك، اسحب زاويته. أما الحقل المعطّل فيبقى بارتفاعه.

صف المشكلة

مطلوب

أخبرنا بما طلبته وما الخطأ الذي حدث وما تريد منا فعله.

249/1000

التسميات وعدّاد الأحرف

ملاحظات التوصيل

اختياري

يرى المندوب ملاحظتك عند وصوله.

27/200

سبب الإرجاع

أخبرنا لماذا تُرجع المنتج.

0/200

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`status`	`"default" \| "success"`	`"default"`	اختر القيمة `success` لتمييز قيمة اجتازت التحقق.
`invalid`	`boolean`	`false`	يجعل الحقل غير صالح، وللسمة `aria-invalid` الأثر نفسه.
`disabled`	`boolean`	`false`	يعطّل الحقل ويُظهر المجموعة كلها باهتة، ويوقف تغيير الحجم.
`label`	`ReactNode`	لا يوجد	تسمية الحقل، ترتبط بمنطقة النص تلقائيًا.
`labelEnd`	`ReactNode`	لا يوجد	ملاحظة قصيرة في نهاية سطر التسمية، مثل «اختياري».
`description`	`ReactNode`	لا يوجد	نص مساعد تحت الحقل، يقرؤه قارئ الشاشة مع الحقل.
`descriptionEnd`	`ReactNode`	لا يوجد	ملاحظة في نهاية سطر النص المساعد، وغالبًا ما تكون عدّاد الأحرف.
`error`	`ReactNode`	لا يوجد	رسالة تظهر مكان `description` ما دام الحقل غير صالح.
`placeholder`	`string`	لا يوجد	نص يظهر والحقل فارغ.
`maxLength`	`number`	لا يوجد	أقصى عدد من الأحرف يقبله الحقل. اعرض العدد في `descriptionEnd`.
`value`	`string`	لا يوجد	قيمة الحقل، وتُستخدم مع `onChange`.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير النص.
`className`	`string`	لا يوجد	أصناف CSS إضافية لمجموعة الحقل.

الاستخدام

tsx

"use client"

import * as React from "react"
import { Textarea } from "@/components/ui/textarea"

export function DeliveryNotes() {
  const [notes, setNotes] = React.useState("")
  return (
    <Textarea
      name="notes"
      label="ملاحظات التوصيل"
      description="يرى المندوب ملاحظتك عند وصوله."
      maxLength={200}
      value={notes}
      onChange={(event) => setNotes(event.target.value)}
      descriptionEnd={`${notes.length}/200`}
    />
  )
}