Textbereich

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

export function TextareaDemo() {

Die Textarea ist ein mehrzeiliges Texteingabefeld. Sie ist ein gestyltes natives <textarea>-Element – ohne Wrapper-Bibliothek auf beiden Backends –, das über CSS field-sizing: content mit seinem Inhalt mitwächst, gekleidet ins neobrutalistische Rezept: dicke Rahmen, harte Schatten und kräftige Typografie.

Typische Anwendungsfälle:

• Kommentare und Antworten – freie Rückmeldungen zu Posts, Bewertungen und Tickets.
• Bios und Beschreibungen – Profil-Bios, Produktbeschreibungen, Kurztexte in Einstellungsformularen.
• Feedback- und Support-Formulare – Bug-Reports und Kontaktnachrichten, alles, was länger als eine Zeile ist.

Installation#

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
Kopieren

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 }

Verwendung#

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

Kopieren<Textarea />

Beispiele#

Field#

Verwende Field, FieldLabel und FieldDescription, um eine Textarea mit Label und Beschreibung zu erstellen.

import {
  Field,
  FieldDescription,

Deaktiviert#

Verwende die disabled-Prop, um die Textarea zu deaktivieren. Um den deaktivierten Zustand zu gestalten, füge der Komponente Field das Attribut data-disabled hinzu.

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

Ungültig#

Verwende die aria-invalid-Prop, um die Textarea als ungültig zu markieren. Um den ungültigen Zustand zu gestalten, füge der Komponente Field das Attribut data-invalid hinzu.

import {
  Field,
  FieldDescription,

Button#

Kombiniere sie mit Button, um eine Textarea mit einem Absende-Button zu erstellen.

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

RTL#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit#

Als natives Formularelement bekommt die Textarea den Tastaturzugriff geschenkt – Tab fokussiert sie, Enter fügt eine neue Zeile ein, statt das Formular abzuschicken –, es greift also kein ARIA-Pattern. Kombiniere sie immer mit einem sichtbaren Label: FieldLabel übernimmt die htmlFor-Verdrahtung, wie im Field-Beispiel gezeigt. Für die Validierung setze aria-invalid auf die Textarea und verweise per aria-describedby auf die Fehlermeldung, damit Screenreader beides vorlesen.