Radio · grupo de opción única
El Radio es la decisión visible. A diferencia del Select, no oculta las opciones; las pone una al lado de la otra y obliga al usuario a leerlas todas. Eficiente entre dos y siete opciones; doloroso por encima de ese rango. Esta ficha documenta el contrato y la policy de cuándo promover a Select.
Decomposición del componente
Las seis capas del componente
01 · Átomo color.neutral.950 · color.red.500 · space.4 · radius.full radius.full distingue visualmente el Radio del Checkbox.
02 · Compuesto color.radio.dot.checked · color.radio.border · space.radio.size · space.radio.gap Semánticos. El gap garantiza hit-target sin solape entre opciones.
03 · Regla roving tabindex · WAI-ARIA radiogroup · umbral 7 → promoción a Select Governance. Solo el radio activo recibe tabindex=0; flechas mueven foco y seleccionan.
04 · Pieza <RadioGroup options={enum} value={x} /> Grupo como unidad. Radio aislado no es canónico.
05 · Familia Inputs / Form fields · sibling de Checkbox, Select Excluyente y visible; diferencia con Checkbox (binario) y Select (oculto).
06 · Estado reposo · hover · focus-visible (en radio activo) · checked · disabled · agent-aware focus-visible solo en el radio con foco (roving tabindex).
Tokens consumidos
Semánticos
color.radio.dot.checked oklch(0.53 0.18 26) Punto interior cuando el radio está seleccionado
color.radio.border oklch(0.78 0.005 75) Anillo exterior, unificado con resto de inputs
space.radio.size 1.125rem 18px, alineado con la x del cuerpo
space.radio.gap 0.75rem Distancia entre opciones del grupo, hit-target garantizado
Técnicas de governance aplicadas
Técnicas activas
Promoción a Select por umbral
Si el agente o el desarrollador propone un Radio con más de 7 opciones, el sistema sugiere el Select. La regla viene de Miller (1956) sobre el span de atención inmediata.
Navegación por flechas obligatoria
Solo el radio seleccionado recibe tabindex 0; el resto tabindex -1. Las flechas mueven el foco y seleccionan en cascada.
Estado físico
Agentic-consumable desde noviembre de 2025. Schema de grupo expuesto vía MCP con regla de promoción a Select cuando opciones > 7.
Estados soportados
hover, focus-visible (en el radio enfocado, no en el grupo), disabled, checked, invalid, agent-aware.
Composiciones prohibidas
Reglas activas
Más de 7 opciones
Agente que proponga 12 opciones recibe sugerencia de promoción a Select searchable. No se bloquea pero se warning en CI.
Radio sin grupo
Un Radio aislado no aporta semántica. Se rechaza si no está dentro de RadioGroup con aria-labelledby al legend.
Default fuera del enum
El value por defecto debe ser una de las opciones válidas o null.
Interoperabilidad
- Consumido por:
RadioGroup(obligatorio),FormRow,SettingsPanel. - Consume:
Labelpor radio, opcionalmenteHelperTextpor opción. - Con qué compone mal: junto a Select con el mismo rango (redundancia), dentro de tablas (la densidad rompe el WAI-ARIA radiogroup).
- Sustituibles por:
Selectsi rango supera 7;Togglesi el rango es binario on/off;Segmentedpara selección visual 2-4 opciones.
Medición propuesta
Eventos planificados
radio.select
from, to, group id, ruta. Detecta grupos donde el usuario cambia varias veces antes de confirmar (fricción de lectura de opciones).
radio.promotion_to_select
Grupos que disparan el warning de umbral 7 en CI, para priorizar poda o promoción.
Mutación plástica (Estado 3)
Qué muta y qué permanece
Disposición vertical vs horizontal layout = derive(viewport × label-length) En mobile con labels largos, el grupo apila vertical. En desktop con labels cortos, horizontal. Siempre respetando gap.
Tamaño del dot interior dot-size = derive(pointer) Touch amplía el dot a 8px; desktop fine lo mantiene a 6px.
Fijo por contract roving tabindex · aria-checked · legend del fieldset Contrato WAI-ARIA inviolable.
Rollback si la disposición propone ocultar opciones por compacidad (contradice la esencia del Radio de mostrar todas) o si el roving tabindex se rompe.
Genealogía
Árbol de evolución
<input type='radio'> nativo estilizado
Reemplazo CSS clásico.
Consumidor Diseñador y desarrollador
Componente React + roving tabindex
Implementación accesible del pattern WAI-ARIA radiogroup.
Consumidor Producto · 14 productos
Radio governable
Lint rule de promoción a Select. Migrado a accent-color CSS.
Consumidor Producto · 26 productos
Radio.AI · expuesto vía MCP
Schema con promoción automática.
Consumidor Humano + agente
Notas del editor
Descartes catalogados
Variants rechazadas
variant='card-style' Radios renderizados como cards grandes para destacar opciones premium. Generaba ambigüedad visual con Cards interactivas y rompía el pattern WAI-ARIA. Movido a componente <RadioCard /> separado.
variant='deselectable' Click sobre el radio seleccionado lo desmarcaba. Rompía la semántica básica del control radio (siempre debe haber uno seleccionado en un grupo). Sustituido por la combinación radio + opción explícita 'ninguno'.
Referencias cruzadas
- Familia: Inputs / Form fields.
- Componente hermano: Nº 0250 · Checkbox.