Área de texto

Un campo de texto de varias líneas para comentarios, biografías y mensajes de asistencia, con ese estilo neobrutalista de bordes y sombras.

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

export function TextareaDemo() {

El textarea es un campo de texto multilínea. Es un elemento <textarea> nativo con estilos —sin biblioteca envolvente en ninguno de los dos backends— que crece automáticamente con su contenido gracias a la propiedad CSS field-sizing: content, vestido con la receta neobrutalista: bordes gruesos, sombras marcadas y tipografía en negrita.

Recurre a este componente cuando:

Comentarios y respuestas — respuestas libres en publicaciones, reseñas y tickets.
Biografías y descripciones — biografías de perfil, descripciones de producto, textos breves en formularios de ajustes.
Formularios de feedback y soporte — informes de errores y mensajes de contacto, cualquier cosa que ocupe más de una línea.

Instalación


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 y pega el siguiente código en tu proyecto.

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 }

Ajusta las rutas de importación a la configuración de tu proyecto.

Uso

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

<Textarea />

Ejemplos

Field

Usa Field, FieldLabel y FieldDescription para crear un área de texto con una etiqueta y una descripción.

import {
  Field,
  FieldDescription,

Deshabilitado

Usa la prop disabled para deshabilitar el área de texto. Para dar estilo al estado deshabilitado, añade el atributo data-disabled al componente Field.

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

Inválido

Usa la prop aria-invalid para marcar el área de texto como inválida. Para dar estilo al estado inválido, añade el atributo data-invalid al componente Field.

import {
  Field,
  FieldDescription,

Button

Combínala con Button para crear un área de texto con un botón de envío.

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

RTL

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad

Al ser un control de formulario nativo, el textarea obtiene gratis el acceso por teclado (Tab lo enfoca y Enter inserta una nueva línea en lugar de enviar el formulario), así que no aplica ningún patrón ARIA. Acompáñalo siempre de una etiqueta visible: FieldLabel se encarga del cableado de htmlFor, como muestra el ejemplo de Field. Para la validación, define aria-invalid en el textarea y referencia el mensaje de error con aria-describedby para que los lectores de pantalla anuncien ambos.