Radio Card

La Radio card es una opción de selección única presentada como tarjeta, con título y descripción. Sirve cuando cada alternativa necesita una breve explicación para decidir.

Propiedades y configuraciones

Cuando usarlo

Úsala cuando la persona debe elegir una sola opción entre pocas alternativas (2 a 4) que no se entienden solo con un nombre: modalidad de atención, forma de hacer un trámite, tipo de entrega con plazos o costos distintos.

Si las opciones se entienden solas (Sí/No, rangos), usa Radio. Si se pueden elegir varias, usa Checkbox. Si la tarjeta debe llevar a otra página, usa Card o Item list, no una Radio card.

Buenas prácticas

Recomendado: Encabeza el grupo con una pregunta clara

Las tarjetas son respuestas: la pregunta debe estar arriba y visible.

Recomendado: Usa la descripción para lo que ayuda a decidir

Plazo, costo o requisito: la descripción debe mostrar la diferencia real entre opciones.

Recomendado: Mantén pocas opciones

Entre 2 y 4 tarjetas se comparan de un vistazo. Con más, cuesta decidir.

Recomendado: Explica por qué una opción no está disponible

Indica el motivo en la descripción y repítelo en la ayuda del grupo, que sigue legible, así no parece un error.

Malas prácticas

No recomendado: No la uses para opciones que no necesitan descripción

Si la descripción solo repite el título, la tarjeta ocupa espacio sin aportar. Para Sí/No usa Radio Button.

No recomendado: No escribas descripciones largas

Párrafos de condiciones dentro de la tarjeta dificultan comparar opciones. Resume y enlaza el detalle fuera.

No recomendado: No la uses como navegación

Una Radio card selecciona una respuesta; no debe llevar a otra sección. Para accesos usa Card o Item list.

No recomendado: No la uses cuando se pueden elegir varias opciones

Las Radio cards parecen permitir selección múltiple, pero solo aceptan una. Para varias opciones usa Checkbox.

Recomendaciones de accesibilidad

Comparte el mismo name en todo el grupo
Las tarjetas de una misma pregunta deben compartir name para comportarse como un grupo de radios: una sola seleccionada y navegación con flechas.

Etiqueta el grupo con su pregunta
Envuelve las tarjetas en .cl-choice-field y relaciónalas con la pregunta con role="radiogroup" o role="group" y aria-labelledby, o con <fieldset> y <legend>.

Mantén título y descripción dentro del label
Toda la tarjeta es el <label> del input; el título y la descripción forman su nombre accesible. No agregues enlaces ni botones dentro de la tarjeta: quedarían anidados en un control.

Escribe descripciones breves
El lector de pantalla lee la descripción completa en cada tarjeta. Textos largos hacen lento recorrer el grupo.

Explica la opción deshabilitada en texto visible
Una tarjeta disabled sale del orden de tabulación y queda atenuada (con bajo contraste). Pon el motivo también en la ayuda del grupo, vinculada con aria-describedby, para que se pueda leer y se anuncie.

No dependas solo del color para mostrar la selección
La tarjeta seleccionada cambia fondo y borde, pero el indicador de radio también cambia; conserva el indicador visible y no lo ocultes con estilos propios.