Sistema de diseño
Radio button
Un radio button es un componente de interfaz que permite a los usuarios seleccionar una única opción dentro de un grupo de opciones mutuamente excluyentes.
Figma
Storybook
AEM
Overview
Dentro de un grupo, los radio buttons permiten seleccionar solo una opción a la vez. Al seleccionar una nueva opción, cualquier opción previamente seleccionada en el mismo grupo se desmarca automáticamente.
Este componente es ideal cuando se necesita que el usuario seleccione una única opción entre varias alternativas mutuamente excluyentes, proporcionando así una forma efectiva de recopilar información o preferencias del usuario.
El diseño de los radio buttons debe enfocarse en la claridad, la facilidad de uso y la accesibilidad. Esto incluye el uso de etiquetas descriptivas y la compatibilidad con tecnologías de asistencia para asegurar una experiencia inclusiva para todos los usuarios, incluyendo aquellos con discapacidades visuales o de movilidad.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
El radio button tiene variantes por estado de interacción.
Variantes según estado
Nombre
Descripción / Uso
Ejemplo
Default
Estado por defecto del elemento
Hover
Efecto hover
Error
Feedback de error al usuario
Error hover
Efecto hover de un radio en estado error
Disabled
Radio button inactivo
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cada una de las variantes del componente tiene las siguientes opciones de configuración:
Selection
Debe proporcionar feedback claro al usuario cuando se selecciona o deselecciona.
Label
En algunos casos, el label puede no ser necesario, ya que el radio button por sí solo puede ser suficiente para que el usuario entienda que debe seleccionar una opción.
Label and Icon
Para que se muestre, es necesario que el label esté activado. Un uso común de esta configuración es acompañar el radio button con un ícono de información.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow / Resizing
No se recomienda que un label tenga más de una línea de texto. Si esto ocurre, el texto del label se expandirá verticalmente, mientras que el radio button se mantendrá alineado con la primera línea.
Grouping
Evitaremos crear grupos muy extensos. Si hay demasiadas opciones, es mejor optar por una solución alternativa como un menú desplegable.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes