منطقة نص

حقل إدخال نص متعدد الأسطر مخصص للتعليقات والسير الذاتية ورسائل الدعم — مع تصميم «نيوبروتاليستي» يتميز بالحدود والظلال.

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

export function TextareaDemo() {

مجال النص (textarea) هو حقل إدخال نصي متعدد الأسطر. وهو عنصر native <textarea> element مُصمم — دون الحاجة إلى مكتبة تغليف في أي من الخلفيتين — يتوسع تلقائيًا مع محتواه عبر CSS field-sizing: content، مصمم وفقًا لنهج «النيوبروتالية»: حدود سميكة، وظلال حادة، وخط عريض.

استخدمه عندما:

التعليقات والردود — الردود الحرة على المنشورات والمراجعات والتذاكر.
السير الذاتية والأوصاف — السير الذاتية في الملفات الشخصية، وأوصاف المنتجات، والنصوص الموجزة في نماذج الإعدادات.
نماذج الملاحظات والدعم — تقارير الأخطاء ورسائل الاتصال، وأي شيء يزيد طوله عن سطر واحد.

التثبيت


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json

انسخ الكود التالي والصقه في مشروعك.

components/ui/textarea.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

حدّث مسارات الاستيراد لتطابق إعداد مشروعك.

الاستخدام

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

<Textarea />

أمثلة

Field

استخدم Field وFieldLabel وFieldDescription لإنشاء منطقة نصّ مع تسمية ووصف.

import {
  Field,
  FieldDescription,

معطّل

استخدم الخاصية disabled لتعطيل منطقة النصّ. لتنسيق الحالة المعطّلة، أضف السمة data-disabled إلى مكوّن Field.

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

غير صالح

استخدم الخاصية aria-invalid لتمييز منطقة النصّ كغير صالحة. لتنسيق الحالة غير الصالحة، أضف السمة data-invalid إلى مكوّن Field.

import {
  Field,
  FieldDescription,

Button

ادمجها مع Button لإنشاء منطقة نصّ مع زر إرسال.

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

RTL

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

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

باعتبارها عنصر تحكم أصلي في النموذج، فإن منطقة النص (textarea) تتمتع بإمكانية الوصول عبر لوحة المفاتيح تلقائيًّا — حيث يقوم Tab بتحديدها، ويقوم Enter بإدراج سطر جديد بدلاً من إرسال النموذج — لذا لا ينطبق عليها أي نمط من أنماط ARIA. احرص دائمًا على إقرانها بتسمية مرئية: يتولى FieldLabel توصيل htmlFor، كما هو موضح في مثال «الحقل». للتحقق من الصحة، قم بتعيين aria-invalid على منطقة النص (textarea) وأشر إلى رسالة الخطأ باستخدام aria-describedby حتى تقوم برامج قراءة الشاشة بإعلان كليهما.