Radio Button

El Radio button permite elegir una sola opción dentro de un grupo de opciones excluyentes. Al seleccionar una, se desmarca automáticamente la anterior.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona debe elegir exactamente una opción de una lista corta (idealmente de 2 a 6) y conviene ver todas las alternativas a la vez: forma de entrega de un documento, tamaño del hogar, respuesta sí/no.

Si puede elegir varias, usa Checkbox. Si las opciones son muchas (regiones, comunas), usa Select. Si cada opción necesita una descripción para decidir, usa Radio card. Para activar o desactivar un ajuste al instante, usa Switch.

Buenas prácticas

Recomendado: Formula una pregunta y agrupa las opciones debajo

Cada grupo necesita una pregunta visible que dé sentido a las opciones.

Recomendado: Ordena las opciones de forma lógica

Usa un orden natural (de menor a mayor, cronológico) y rangos que no se solapen.

Recomendado: Ofrece una salida cuando ninguna opción aplica

Cierra la lista con “Otra” y un campo para que la persona escriba su caso. Si la pregunta es sensible o no obligatoria, suma “Prefiero no responder”.

Recomendado: Explica el error a nivel de grupo

Si la pregunta es obligatoria y quedó sin responder, marca el grupo con error y di qué falta.

Malas prácticas

No recomendado: No preselecciones respuestas que la persona debe decidir

Una opción marcada por defecto se acepta sin leer. En decisiones personales, deja el grupo sin selección.

No recomendado: No lo uses para listas largas

Una lista extensa de radios alarga la página y dificulta encontrar la opción. Para muchas alternativas, usa Select.

No recomendado: No uses un radio suelto para aceptar algo

Un radio seleccionado no se puede desmarcar. Para una confirmación individual, usa Checkbox.

No recomendado: No ofrezcas opciones que se solapan

Si dos opciones pueden ser verdaderas a la vez (alguien de 30 o 45 años), la persona no sabe cuál elegir.

Recomendaciones de accesibilidad

Comparte el mismo name en todo el grupo
Los radios de una pregunta deben compartir name. Así el navegador los trata como un solo grupo: se recorren con las flechas del teclado y solo uno puede quedar seleccionado.

Etiqueta el grupo con su pregunta
Relaciona las opciones con .cl-choice-field__label usando role="radiogroup" o role="group" con aria-labelledby, o un <fieldset> con <legend>. El lector de pantalla anunciará la pregunta al entrar al grupo.

Mantén el input dentro de su label
El kit envuelve el <input type="radio"> en <label class="cl-radio">; el texto visible es el nombre accesible y toda la etiqueta es clicable.

Asocia el error y la ayuda al grupo
Vincula el __hint al grupo (p. ej. con aria-describedby) y marca el grupo como requerido cuando lo sea, para que el mensaje no dependa solo del color rojo.

Escribe etiquetas que se entiendan fuera de contexto
Los lectores de pantalla anuncian cada opción con su posición (“2 de 3”). Evita opciones como “Otra” o “Sí” sin una pregunta clara que las preceda.

No deshabilites opciones sin explicación
Una opción disabled sale del recorrido del teclado. Si no está disponible, dilo en texto visible cerca del grupo.