Text Field

El Text field es el campo de formulario para ingresar un dato breve de una sola línea: un nombre, un RUT, un correo o un número de documento. Incluye label, descripción y ayuda opcionales, e ícono al final opcional.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona deba escribir un dato corto y libre que no se puede anticipar en una lista: nombre, RUT, correo, teléfono, número de serie del carnet o folio de un trámite.

Si la respuesta es larga o de varias líneas, usa Textarea. Si las respuestas posibles son conocidas y acotadas, usa Radio Button (pocas opciones) o Select (lista larga). Para códigos de verificación de un solo uso, usa OTP input.

Buenas prácticas

Recomendado: Escribe labels breves y explica el formato en el texto de ayuda

El label nombra el dato en pocas palabras; el formato o un ejemplo van en el texto de ayuda bajo la caja, que sigue visible mientras la persona escribe.

Recomendado: Ajusta el ancho del campo al largo del dato

El ancho de la caja es una pista del largo de la respuesta: un RUT en una caja corta, un correo en una caja ancha.

Recomendado: Escribe mensajes de error que expliquen cómo corregir

El error debe decir qué pasó y qué hacer, con las palabras de la persona y no las del sistema.

Recomendado: Marca con asterisco los campos obligatorios

Explica al inicio del formulario que el asterisco (*) indica un campo obligatorio. Si casi todos lo son, marca en cambio los pocos opcionales con “(opcional)” en el label.

Recomendado: Ajusta el campo a la estructura del dato

Si el dato tiene una estructura definida, como un correo, configura el campo para ese tipo: en el celular se abre el teclado con @, el navegador sugiere el correo guardado y se puede revisar que tenga la forma nombre@dominio.

Recomendado: Acepta el dato en el formato que la persona conoce

Ignora espacios, puntos, guiones o el +56, y valida solo lo que importa. Así la persona puede escribir o pegar el dato tal como lo tiene anotado.

Malas prácticas

No recomendado: No uses el placeholder como label ni para instrucciones

El placeholder desaparece al escribir y se confunde con un valor ingresado. El nombre del dato debe estar siempre en el label.

No recomendado: No uses mensajes de error genéricos

“Campo inválido” o “Dato inválido” obligan a adivinar qué corregir y aumentan el abandono del trámite.

No recomendado: No uses un campo libre cuando las respuestas son conocidas

Si la respuesta sale de una lista cerrada, escribirla a mano genera errores de tipeo. Usa un Select o un grupo de Radio Button.

No recomendado: No dividas en cajas un dato que se escribe de corrido

El RUT o el teléfono se escriben o se pegan de una vez: separarlos en partes complica copiar, pegar y usar lector de pantalla.

No recomendado: No dejes sin nombre las partes de un dato

Tres cajas separadas por barras no dicen cuál es el día y cuál el mes. Si divides un dato en partes, cada una necesita su label.

No recomendado: No rechaces un dato solo por su formato

Si el sistema puede quitar puntos, guiones o espacios, no le pidas a la persona que lo haga. Rechaza solo datos incorrectos o ambiguos.

Recomendaciones de accesibilidad

Asocia siempre el label al input
Usa <label for> apuntando al id del <input>, como en el markup del kit. Así el nombre se anuncia al enfocar el campo y el clic en el label enfoca la caja.

Vincula la descripción y la ayuda con aria-describedby
El markup base no las conecta automáticamente. Agrega aria-describedby con los id de la descripción y de la ayuda para que el formato esperado y el mensaje de error se lean junto al campo.

Marca el error también en el input
Además de .cl-field--error, agrega aria-invalid="true" al <input> y un mensaje de error en texto. El cambio de color no basta para quien no distingue el rojo.

Usa el tipo y el autocompletado correctos
Declara type="email", type="tel", inputmode="numeric" y autocomplete (name, email, tel) según el dato. Facilita el ingreso en móvil y ayuda a personas con dificultades motoras o cognitivas.

Mantén el ícono como decorativo
El ícono al final lleva aria-hidden="true". Si el ícono ejecuta una acción (por ejemplo, limpiar el campo), debe ser un botón con nombre accesible propio, no el ícono decorativo del campo.

Evita deshabilitar sin explicación
Un campo disabled no recibe foco y su contenido puede pasar inadvertido. Si el dato no se puede editar, explica por qué en el texto de la ayuda o muéstralo como texto de solo lectura.