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

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

التثبيت

bash

npx @smicolon/fasla-ui@latest 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

"use client"

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

export function MessageField() {
  return (
    <Textarea
      name="message"
      aria-label="الرسالة"
      placeholder="اكتب رسالتك…"
    />
  )
}

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

tsx

"use client"

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

export function MessageFieldWithCount() {
  return (
    <Textarea
      name="message"
      aria-label="الرسالة"
      placeholder="اكتب هنا…"
      showCount
      maxLength={200}
    />
  )
}

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

tsx

"use client"

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

export function MessageFieldResize() {
  return (
    <div className="flex flex-col gap-4">
      <Textarea aria-label="الرسالة" resize="none" />
      <Textarea aria-label="الرسالة" resize="vertical" />
      <Textarea aria-label="الرسالة" resize="both" />
    </div>
  )
}

حالة الخطأ

tsx

"use client"

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

export function MessageFieldWithError() {
  return <Textarea name="message" aria-label="الرسالة" variant="error" aria-invalid />
}