Area di testo

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

export function TextareaDemo() {

La textarea è un campo di testo multiriga. È un elemento <textarea> nativo stilizzato — nessuna libreria wrapper su nessuno dei due backend — che cresce da solo con il contenuto grazie alla proprietà CSS field-sizing: content, vestito della ricetta neobrutalista: bordi spessi, ombre nette e tipografia in grassetto.

Quando usarlo:

• Commenti e risposte — risposte a testo libero a post, recensioni e ticket.
• Bio e descrizioni — bio dei profili, descrizioni di prodotto, testi brevi nei moduli delle impostazioni.
• Moduli di feedback e assistenza — segnalazioni di bug e messaggi di contatto, tutto ciò che va oltre una riga.

Installazione#

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
Copia

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 }

Utilizzo#

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

Copia<Textarea />

Esempi#

Field#

Usa Field, FieldLabel e FieldDescription per creare un'area di testo con un'etichetta e una descrizione.

import {
  Field,
  FieldDescription,

Disabilitato#

Usa la prop disabled per disabilitare l'area di testo. Per applicare uno stile allo stato disabilitato, aggiungi l'attributo data-disabled al componente Field.

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

Non valido#

Usa la prop aria-invalid per contrassegnare l'area di testo come non valida. Per applicare uno stile allo stato non valido, aggiungi l'attributo data-invalid al componente Field.

import {
  Field,
  FieldDescription,

Button#

Abbinala a Button per creare un'area di testo con un pulsante di invio.

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

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

In quanto controllo di modulo nativo, la textarea ha l’accesso da tastiera gratis — Tab le dà il focus, Enter inserisce un a capo invece di inviare il modulo — quindi nessun pattern ARIA si applica. Abbinala sempre a un’etichetta visibile: FieldLabel si occupa del collegamento htmlFor, come mostrato nell’esempio con Field. Per la validazione, imposta aria-invalid sulla textarea e collega il messaggio di errore con aria-describedby, così gli screen reader annunciano entrambi.