Botón de radio

Es un elemento que se utiliza cuando solo puede seleccionarse una opción en un listado de varias de ellas.

Anatomía #

Se compone de un radio, un elemento circular, y de una etiqueta con el nombre de la opción.

La alineación puede ser tanto en vertical como en horizontal, siendo preferible siempre que sea posible la alineación vertical.

Variantes #

Por defecto #

Es el que se recomienda usar en primera instancia.

Condicional #

Se usa en los casos en los que hay contenido adicional, por ejemplo, si al seleccionar la opción, el usuario debe introducir algún input. En este caso, debajo del radio se introduce una línea vertical que abraza el contenido adicional.

Con líneas divisoras #

En general, no se recomienda su uso. Se emplea cuando el contenido es extenso y se requiere hacer una división visual de los elementos.

Tamaños #

Tamaño base #

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Tamaño pequeño #

Se recomienda su uso cuando el elemento estándar sea demasiado grande para el espacio donde debe de encajar, por ejemplo dentro de tablas, cards, grupos de filtros o similares.

Buenas prácticas #

• Las distintas opciones deben ser mutuamente excluyentes.
• Un conjunto de casillas de selección debería, siempre, tener una opción marcada por defecto.
• En el caso de que se trate de una opción condicional, debe aparecer desplegada la opción seleccionada por defecto.
• Liste las opciones en un orden racional que tenga sentido para el usuario.
• Si el conjunto de opciones es mayor a 5, es preferible emplear un elemento de selección o desplegable.
• El input de entrada no debe limitarse al radio, sino que también debe poderse seleccionar la opción pulsando en la etiqueta.