Tekstgebied

Een tekstveld voor meerdere regels, voor reacties, biografieën en ondersteuningsberichten — met die neobrutalistische stijl van randen en schaduwen.

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

export function TextareaDemo() {

De textarea is een tekstinvoer met meerdere regels. Het is een gestyled native <textarea>-element — zonder wrapperbibliotheek op welke backend dan ook — dat via CSS field-sizing: content meegroeit met de inhoud, gestoken in het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie.

Ideaal voor:

Reacties en antwoorden — vrije tekst bij posts, reviews en tickets.
Bio's en beschrijvingen — profielbio's, productbeschrijvingen, korte teksten in instellingenformulieren.
Feedback- en supportformulieren — bugmeldingen en contactberichten, alles wat langer is dan één regel.

Installatie


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

Kopieer en plak de volgende code in je project.

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 }

Werk de import-paden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

<Textarea />

Voorbeelden

Field

Gebruik Field, FieldLabel en FieldDescription om een textarea met een label en beschrijving te maken.

import {
  Field,
  FieldDescription,

Uitgeschakeld

Gebruik de disabled-prop om de textarea uit te schakelen. Om de uitgeschakelde status te stylen, voeg je het attribuut data-disabled toe aan de component Field.

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

Ongeldig

Gebruik de aria-invalid-prop om de textarea als ongeldig te markeren. Om de ongeldige status te stylen, voeg je het attribuut data-invalid toe aan de component Field.

import {
  Field,
  FieldDescription,

Button

Combineer met Button om een textarea met een verzendknop te maken.

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

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

Als native formulierelement krijgt de textarea toetsenbordtoegang cadeau — Tab focust hem, Enter voegt een nieuwe regel in in plaats van het formulier te verzenden — dus er is geen ARIA-patroon van toepassing. Combineer hem altijd met een zichtbaar label: FieldLabel regelt de htmlFor-koppeling, zoals te zien in het Field-voorbeeld. Zet voor validatie aria-invalid op de textarea en verwijs met aria-describedby naar de foutmelding, zodat schermlezers beide voorlezen.