ناحیه متن

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

export function TextareaDemo() {

Textarea یک ورودی متن چندخطی است. یک عنصر بومی <textarea> استایل‌شده است — بدون کتابخانهٔ wrapper در هیچ backend — که از طریق CSS field-sizing: content با محتوایش auto-grow می‌کند، با دستور پخت نئوبروتالیستی: حاشیه‌های ضخیم، سایه‌های سخت و تایپوگرافی پررنگ.

برای این موارد از آن استفاده کنید:

• نظر و پاسخ — پاسخ آزاد روی پست، review و تیکت.
• Bio و توضیح — bio پروفایل، توضیح محصول، blurb فرم تنظیمات.
• فرم بازخورد و پشتیبانی — گزارش باگ و پیام تماس، هر چیزی بلندتر از یک خط.

نصب#

pnpmnpmyarnbun
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
کپی

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 خط جدید می‌گذارد نه submit فرم — پس الگوی ARIA اعمال نمی‌شود. همیشه با برچسب نمایان جفتش کنید: FieldLabel سیم‌کشی htmlFor را هندل می‌کند، چنان‌که در نمونهٔ Field دیده می‌شود. برای اعتبارسنجی، aria-invalid را روی textarea بگذارید و پیام خطا را با aria-describedby ارجاع دهید تا صفحه‌خوان هر دو را اعلام کند.