Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Radio
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.
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.
Como 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.
Como 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”.
Si no se puede tener un listado con todas las opciones añadimos un “Otros”.
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
Orientación en modo lista
Horizontal
Vertical
Tipos de radio en formularios
Sin texto
Con texto
Estados
Default
Hover
Focus
Select
Disabled
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.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
