Textarea

El Textarea es el campo de formulario para respuestas abiertas de varias líneas, como la descripción de un reclamo o el motivo de una solicitud. Comparte la anatomía del Text field y su caja se puede agrandar en alto.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la respuesta sea abierta y pueda ocupar varias oraciones: describir un problema, justificar una apelación, detallar un reclamo o dejar observaciones para quien revisa el trámite.

Si el dato es corto o tiene un formato definido (RUT, teléfono, folio), usa Text field. Si las respuestas posibles se conocen de antemano, usa Radio Button, Checkbox o Select.

Buenas prácticas

Recomendado: Resérvalo para respuestas realmente abiertas

Úsalo cuando la persona necesita explicar con sus palabras algo que no cabe en una lista de opciones ni en un dato corto.

Recomendado: Explica qué información incluir

Una descripción concreta ayuda a que la respuesta sirva para resolver el caso a la primera, sin idas y vueltas.

Recomendado: Comunica el límite de caracteres antes de escribir

Si hay un límite, dilo en la ayuda desde el inicio. Descubrirlo al final obliga a reescribir.

Recomendado: Dimensiona el área según la respuesta esperada

La altura inicial anticipa cuánto se espera que la persona escriba: más alta para un relato, mínima para observaciones breves.

Malas prácticas

No recomendado: No lo uses para datos cortos o con formato

Un área de varias líneas para un RUT o un teléfono sugiere un texto largo y deja pasar formatos que no se pueden validar.

No recomendado: No pongas las instrucciones en el placeholder

El placeholder desaparece al primer carácter y la persona pierde la guía justo cuando la necesita. Las instrucciones van en la descripción.

No recomendado: No mezcles varias preguntas en un solo campo

Pedir varios datos en un mismo Textarea produce respuestas incompletas y difíciles de revisar. Separa cada dato en su propio campo.

No recomendado: No uses un Textarea deshabilitado para mostrar información

El texto atenuado es difícil de leer y no recibe foco. Si el contenido es solo de lectura, muéstralo como texto.

Recomendaciones de accesibilidad

Asocia el label al textarea
Usa <label for> apuntando al id del <textarea>, como en el markup del kit, para que la pregunta se anuncie al enfocar el campo.

Conecta descripción y ayuda con aria-describedby
El markup base no las enlaza. Referencia los id de la descripción y de la ayuda para que las instrucciones y el límite de caracteres se lean junto al campo.

Anuncia el límite sin depender de un contador visual
El kit no trae contador. Si agregas uno, actualízalo en una región aria-live="polite" y con moderación (por ejemplo, al acercarse al límite), para no interrumpir la lectura en cada tecla.

No cortes el texto en silencio
Evita maxlength que trunca sin aviso: quien usa lector de pantalla puede no notar que su texto no se escribió. Prefiere permitir escribir y mostrar un error claro al superar el límite.

Marca el error en el control
Además de .cl-field--error, agrega aria-invalid="true" al <textarea> y un mensaje de error en texto que explique cómo corregir.

Respeta el redimensionado
No bloquees resize ni fijes alturas que obliguen a desplazarse dentro de una caja diminuta; las personas que usan zoom o letra grande necesitan ver su texto completo.