אזור טקסט

שדה הזנת טקסט רב-שורות להערות, ביוגרפיות והודעות תמיכה — עם עיצוב ניאו-ברוטליסטי הכולל מסגרות וצללים.

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

export function TextareaDemo() {

ה-textarea הוא שדה טקסט רב-שורות. זה אלמנט <textarea> מקורי מעוצב — בלי ספריית עטיפה באף backend — שגדל אוטומטית עם התוכן דרך 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 כך שיתאימו להגדרות הפרויקט שלכם.

שימוש

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

<Textarea />

דוגמאות

Field

השתמשו ב-Field, ב-FieldLabel וב-FieldDescription כדי ליצור אזור טקסט עם תווית ותיאור.

import {
  Field,
  FieldDescription,

מושבת

השתמשו ב-prop disabled כדי להשבית את אזור הטקסט. כדי לעצב את המצב המושבת, הוסיפו את המאפיין data-disabled לרכיב Field.

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

לא תקין

השתמשו ב-prop 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, כמו בדוגמת Field. לוולידציה, הגדירו aria-invalid על ה-textarea והפנו להודעת השגיאה עם aria-describedby כדי שקוראי מסך יכריזו על שניהם.