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

يتيح لك مكوّن منطقة النص (Textarea) كتابة نص من عدة أسطر، مع عدّاد للأحرف وخيارات لتغيير الحجم.

التثبيت

bash

npx @smicolon/cli add textarea

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

معاينة

مع عدّاد الأحرف

0/200

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

الحالات

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"default" \| "error"`	`"default"`	النمط (variant): الافتراضي أو الخطأ.
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	الاتجاهات التي يمكن تغيير الحجم فيها.
`showCount`	`boolean`	`false`	يعرض عدّادًا للأحرف.
`maxLength`	`number`	لا يوجد	أقصى عدد من الأحرف.
`placeholder`	`string`	لا يوجد	نص يظهر والحقل فارغ.
`disabled`	`boolean`	`false`	يعطّل المنطقة ويُظهرها باهتة.
`value`	`string`	لا يوجد	قيمة النص، وتُستخدم مع `onChange`.
`onChange`	`(event) => void`	لا يوجد	تُستدعى عند تغيير النص.
`className`	`string`	لا يوجد	أصناف (class) إضافية للمكوّن.

الاستخدام

tsx

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

// منطقة نص بسيطة
<Textarea placeholder="اكتب رسالتك…" />

// مع عدّاد الأحرف
<Textarea
  placeholder="اكتب هنا…"
  showCount
  maxLength={200}
/>

// خيارات تغيير الحجم
<Textarea resize="none" />
<Textarea resize="vertical" />
<Textarea resize="both" />

// حالة الخطأ
<Textarea variant="error" />