Radio

Componentes

Radio

Las entradas numéricas son similares a las entradas de texto, pero se utilizan para introducir valores numéricos e incluye controles para aumentar o reducir el valor de forma incremental.

Vista Previa

Figma

Usos

Listados de opciones mutuamente excluyentes en el que solo se puede seleccionar una opción porque al pulsar una el resto se deselecciona automaticamente.

Cuándo usar

En formularios, modales o paneles laterales.

Para cambiar de una configuración a otra en un menú, página o componente.

Elegir un elemento dentro de tablas o listas de datos.

Mostrar todas las opciones disponibles.

Cuándo no usar

Si se puede seleccionar varias opciones de la lista debemos de usar el Checkbox y no limitar el número de selecciones.

Si hay dos opciones que muestran una configuración de encendido/apagado consideramos usar un Switch.

Para listas con más de siete opciones consideramos un Select.

Buenas prácticas

Se recomienda tener un mínimo de dos elementos y un máximo de siete.

Utilizamos etiquetas para los grupos.

Mostramos las opciones en un orden lógico, de más probable a menos probable de ser seleccionado, de operación más simple a compleja, de menos a mayor riesgo...

Mostramos una opción de grupo seleccionada por defecto. Si la seguridad y protección lo permiten, seleccionar la opción más probable o conveniente.

Si se necesita un estado no seleccionado añadimos una opción de “Ninguno”.

Evitamos ordenar por orden alfabético porque depende del idioma .

Evitamos opciones que se superpongan, ejemplo 0-10; 10-20; ¿Qué opción se seleccionaría si quieres elegir 10?.

Con la primera letra mayúscula.

No utilizamos comas ni punto y coma al final de cada línea.

Comportamiento

Tipos

Simple

Button

Tipos

Orientación en modo lista

Horizontal

Vertical

Tipos de radio en formularios

Sin texto

Con texto

Estados

Visualización del componente radio en estado por defecto

Default

Hover

Visualización del componente radio en estado enfocado

Focus

Visualización del componente en estado seleccionado

Select

Visualización del componente radio en estado deshabilitado

Disabled

Visualización del componente radio en estado seleccionado y deshabilitado

Select Disabled

Error

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

La propiedad label siempre es necesaria para el control de la accesibilidad del botón radio.

El radio button tiene role="radio"

Si el radio button esta marcado, la propiedad aria-checked se establece en true, de lo contrario se establece en false.

Si es un grupo de radio buttons están contenidos en un elemento con role="radiogroup".

Si hay elementos que proporcionan información adicional sobre el grupo de radio buttons o cada radio button, dichos elementos son referenciados por el elemento radiogroup o los elementos radio button con la propiedad aria-describedby.

Si es un grupo de radio buttons se encapsula entre las etiquetas “fieldset” y el label se mete dentro de la etiqueta “legend”.

Si el grupo de radio buttons es obligatorio, tiene la propiedad aria-required.