Índice de páginas
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 #
Es el que se recomienda usar en primera instancia.
Condicional #
Se usa en los casos en los que hay contenido adicional. En este caso, una vez se marca la opción, despliega un input abrazado con una línea a la izquierda.
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.
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é 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.