DESY

Sistema de Diseño del Gobierno de Aragón.

Botón de radio

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

Índice de apartados de esta página

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
Condicional
Con líneas divisoras

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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
Tamaño pequeño

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.

Accesibilidad

Cómo funciona

Grupo rodeado con el elemento fieldset y su legend. Cada item del grupo es un input con type=radio. Deben tener asociado un label a través del id único del input.

Cuando se navega con teclado, la persona puede desplazarse por la lista de items con las flechas.

Más información sobre los inputs en el apartado accesibilidad de formularios.

Qué tener en cuenta
Qué usar Dónde Función
fieldset Parámetro Nunjucks dentro del componente Utiliza el parámetro legend de su interior como título. Debe ser visible.
idprefix Parámetro Nunjucks dentro del componente Permite las llamadas entre label, hint, error y el input. El propio componente se encarga de construir un id único para cada item.

Buenas prácticas

  • Las distintas opciones deben ser mutuamente excluyentes.
  • Siempre deberían 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.
  • Lista las opciones en un orden racional y 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 botón circular. La persona también debe poder seleccionar la opción pulsando en la etiqueta.