Visión General del Componente
Usa patrones de botón de radio para organizar formularios donde se elige una opción de un grupo visible. Deja claro el estado y la siguiente acción para que el componente se entienda de un vistazo. Alinea las etiquetas y la jerarquía visual con la pantalla que lo contiene.
Selección única
Usa botones de opción cuando solo se pueda elegir una alternativa, agrupa las opciones bajo una etiqueta y destaca la selección. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.
Agrupación de opciones
En Figma, compara las variantes del componente dentro de una pantalla real del producto. Revisa el espaciado, el contraste y las etiquetas en los estados relevantes y adapta el patrón al sistema de diseño del equipo. Documenta la variante y los estados elegidos para mantener la coherencia entre pantallas.
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
Premium
Incluido en versión gratuita