Radio

Visión General del Componente

El Radio Button en Emvi UI es un control de selección fundamental que permite a los usuarios elegir una sola opción dentro de un conjunto excluyente. Es ideal para formularios, paneles de preferencias, diálogos modales o configuraciones donde se requiere una decisión única, clara y definitiva. A diferencia de los checkboxes, los radios aseguran que solo haya una opción activa por grupo. En Emvi UI, este componente se ha diseñado con foco en la claridad, accesibilidad (cumple con WCAG) y alineación perfecta tanto en los prototipos de Figma como en implementaciones basadas en Tailwind. El sistema permite personalización visual a través de tokens y estilos compartidos con otros elementos del Design System.

Selección única

Un Radio es un elemento de UI diseñado para permitir a los usuarios seleccionar un único valor de un conjunto predefinido de opciones mutuamente excluyentes. Esto garantiza que solo se pueda elegir una opción a la vez, lo que lo hace ideal para escenarios donde se requiere una elección específica, como seleccionar un método de pago o responder a una pregunta de opción múltiple.

Agrupación de opciones

Los Radios normalmente se organizan en grupos, donde cada botón representa una opción diferente. Agrupar Radios ayuda a organizar las opciones relacionadas y proporciona una estructura clara para los usuarios. Cuando se selecciona un Radio en el grupo, cualquier botón seleccionado previamente se deselecciona automáticamente, manteniendo la exclusividad de las opciones.

Explicación de opciones

Cada Radio normalmente incluye una etiqueta que explica la opción que representa. Esta etiqueta proporciona contexto y claridad, ayudando a los usuarios a comprender lo que representa cada opción. Un etiquetado claro es esencial para una experiencia de usuario intuitiva, asegurando que los usuarios puedan tomar decisiones informadas rápida y fácilmente. Nuestro kit de UI incluye componentes Radio personalizables que pueden adaptarse fácilmente a cualquier diseño, proporcionando una forma fácil de usar para presentar opciones exclusivas.

Tipos y Variantes

Estándar: radio con etiqueta principal.
Con subetiqueta: incluye texto auxiliar para dar contexto.
Apilado (stacked): alineación vertical para móviles o etiquetas largas.
En línea (inline): disposición horizontal para opciones breves.
Deshabilitado: estado no interactivo para opciones bloqueadas.
Las variantes se adaptan visualmente a temas claro/oscuro y utilizan tokens como radio.bg, radio.dot, y radio.label.

Tamaños, Espaciado y Escala

Emvi UI contempla tres tamaños para mantener consistencia visual:
SM – layouts compactos o tablas densas
MD – valor por defecto, ideal para formularios o configuraciones
LG – decisiones destacadas, onboarding o pantallas táctiles
El espaciado entre el círculo y la etiqueta se gestiona mediante Auto Layout en Figma y utilidades Tailwind (gap, align-center). Asegura áreas clicables de al menos 44×44 px para cumplir con estándares de accesibilidad.

Estados y Comportamiento

Los radio buttons funcionan como parte de un grupo definido por el atributo name. Solo uno puede estar activo a la vez. Estados incluidos:
Desmarcado / Marcado
Hover / Foco visible
Deshabilitado (no seleccionable)
Error (durante validaciones)
En términos de UX, los radio buttons deben usarse solo cuando todas las opciones están visibles. Evita esconderlas en menús o toggles, salvo que sea estrictamente necesario.

Accesibilidad

Para garantizar un diseño inclusivo:
Usa <label> para que toda el área sea clicable
Asegura que todos los radios del grupo compartan el atributo name
Usa aria-describedby si hay texto auxiliar
Asegura foco visible y navegación por teclado
No te bases solo en el color para indicar selección
Los lectores de pantalla podrán interpretar correctamente los radios si se aplican buenas prácticas ARIA (aria-checked, role="radio", aria-labelledby).

Integración con Figma y Tailwind

Figma:
El componente incluye estados: normal, marcado, deshabilitado, error
Compatible con temas claro/oscuro usando estilos de tokens
Usa Auto Layout para alinear radio, etiqueta y subetiqueta
Variantes disponibles: apilado, en línea, con/sin descripción
Tailwind:
Layout: inline-flex items-center gap-2
Punto activo: peer-checked:bg-primary-500, rounded-full border
Foco: focus-visible:ring-2 ring-offset-2
Variantes responsivas: sm:gap-1, lg:w-5
Los tokens se comparten con otros inputs para mantener coherencia visual.

Buenas Prácticas de Implementación

Úsalo cuando solo una opción debe estar activa en un grupo
Siempre usa etiquetas (label) — evita estados ambiguos
No uses radios como toggles — para eso están los switches
Evita marcar por defecto sin justificación
Cuida el espaciado y legibilidad en todos los estados
Usa variantes de Figma para documentar correctamente en diseño