# Textarea Permite ingresar texto libre de varias líneas, como un comentario, una observación o el resumen de una causa. El borde activo adopta el morado Lexy. ```tsx import { Textarea } from "@/components/ui/textarea"; ``` ## Default ### Cuándo usar - Entradas de texto de varias líneas: descripciones, resúmenes, observaciones. - Comentarios y notas que pueden crecer en extensión. - Cuando el formato libre importa más que la estructura. ### Cuándo no usarlo - Si el dato es una sola línea, como un nombre o un RUT: usa Input. - Si el contenido requiere formato enriquecido: usa un editor rich-text. ## Con contador ### Límite de caracteres Cuando hay un límite, muestra el contador debajo del campo, alineado a la derecha. Limita la entrada en el handler para evitar superar el máximo. ```tsx const [value, setValue] = useState(""); const max = 280; <Textarea value={value} onChange={(e) => setValue(e.target.value.slice(0, max))} placeholder="Resume la causa en pocas líneas…" /> <div className="text-right text-[12px] text-neutral-foreground-3"> {value.length}/{max} </div> ``` ## Estados ### Default, solo lectura, deshabilitado y error ```tsx <Textarea placeholder="Default" /> <Textarea placeholder="Solo lectura" readOnly defaultValue="Texto..." /> <Textarea placeholder="Deshabilitado" disabled /> <Textarea placeholder="Con error" error /> ``` ## Accesibilidad ### Etiquetado y teclado - Asocia siempre el campo a una Label visible o aria-label. - Si hay límite, anuncia los caracteres restantes en una región aria-live cuando el usuario se acerca al límite. - El borde de foco usa morado Lexy con contraste suficiente. - Permite cambiar el tamaño del campo si el contenido es largo (rows o resize). ## Contenido ### Placeholder y ayuda - Placeholder indica el tipo de contenido esperado, no reemplaza al label. - Si necesitas guiar el formato, usa un texto de ayuda debajo del campo. - Los mensajes de error van debajo, en rojo, con texto accionable.