Textarea

Cuándo usarlo#

Para respuestas que pueden ocupar más de una línea: comentarios, motivos, descripciones. Si la respuesta esperada es una palabra o una frase corta, es un Input.

• El alto inicial sugiere cuánto escribir. sm para una o dos frases; lg para textos largos.
• Se puede agrandar verticalmente; nunca horizontalmente (rompe el layout).
• Si hay límite de caracteres, decilo en la ayuda antes de que se pasen.

Con error#

import { Textarea } from "@/registry/ds/input";

export default function TextareaError() {
  return (
    <div className="w-96">
      <Textarea size="sm" label="Comentario" required defaultValue="ok" error="Escribí al menos 20 caracteres para que podamos ayudarte." />
    </div>
  );
}

Todo lo de contenido de Input aplica igual.

Medidas#

Radio radius-md (8). Interlineado del valor: 24. Los tokens de color por estado son los mismos que Input — ver Input · Tokens.

En Figma#

Instalación#

npx shadcn@latest add https://polen.cdc.cool/r/input.json

Playground#

Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.

<Textarea label="Motivo de la solicitud" placeholder="Contanos brevemente por qué…" hint="Máximo 500 caracteres." />

Uso#

import { Textarea } from "@/components/ds/input";

<Textarea label="Comentario" hint="Máximo 500 caracteres." maxLength={500} />

Props#

Las mismas de Input —size, label, hint, error, required, disabled— sin iconos, más los atributos nativos de <textarea> (rows, maxLength…).

Igual que Input: label asociado, ayuda y error con aria-describedby, aria-invalid al haber error y foco visible en todo el contenedor.

• Enter inserta una línea nueva: no envíes el formulario con Enter desde un textarea.
• Tab sale del campo (no inserta tabulación).