---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 09
titulo: "Radio — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)"
sequencia: 11 de 98
bytes_do_corpo: 4620
md5_do_corpo: d13e99006b416db667f53a7be7df8f78
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 9. Radio — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)

> **Base (3 rodadas):** R1 — GOV.UK radios + NN/g default selection (conflito), USWDS (irreversibilidade; "None of the above"). R2 — radio cards (Setproduct "variante é fantasia, não componente", USWDS tile: não misturar tile+default). R3 — APG radio group (roving tabindex; setas movem E selecionam), GOV.UK conditional reveal (aria-expanded removido após pesquisa). J1–J6 conferidas no consolidado.

### 9.1 Papel e a régua

2–6 opções mutuamente exclusivas, todas visíveis (§7.1). Sim/Não = radio de 2 — nunca checkbox único ambíguo (J6). Grupo = fieldset+legend (§2.6b), sempre em coluna (GOV.UK: lado a lado confunde a associação rótulo-círculo).

### 9.2 Decisões J1–J6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| J1 | **Default por contexto**: configuração/produto com opção majoritária SEGURA → pré-selecionado (caso Modalidade A4 §7); pergunta factual sobre o usuário (formulário público) → SEM default + opção "Não sei"/"Nenhuma" quando fizer sentido | Radio não volta ao vazio (USWDS): default em pergunta factual FORJA resposta; default em setting poupa a interação (NN/g) — o conflito histórico NN/g×GOV.UK se resolve por contexto | Default universal (forja dados); nunca-default universal (pune settings) |
| J2 | Ordem por lógica do domínio; alfabética como fallback; frequência com cautela (viés de ancoragem) | GOV.UK | Ordem aleatória "pra ser neutro" |
| J3 | **Radio card = variante visual do MESMO grupo**: input real DENTRO, círculo VISÍVEL, borda 2px `--seed-action-primary-bg` no selecionado; nunca misturar cards e radios simples no mesmo grupo; card e default não se misturam | Setproduct: pular a semântica porque "parece card" quebra teclado e leitor; USWDS tile | Card sem círculo (vira botão ambíguo — ver teste 4) |
| J4 | Nativo `<input type="radio">` sempre que possível; custom exige roving tabindex COMPLETO (grupo = 1 tab stop; setas movem e selecionam; Tab entra no marcado) | APG; o nativo dá tudo de graça | Divs com tabindex em cada item (quebra o modelo de grupo) |
| J5 | Conditional reveal (campo que aparece ao marcar): SEM `aria-expanded` no radio (GOV.UK removeu — não suportado no role); o revelado vem IMEDIATAMENTE após na ordem do DOM | Pesquisa GOV.UK/NHS | aria-expanded (anúncio quebrado em AT) |
| J6 | Sim/Não = radio de 2 | Checkbox único não distingue "não" de "não respondi" | Checkbox "Sim" solitário |

### 9.3 Anatomia e tokens

Círculo 24px (hit 44), borda 2px `--seed-field-border`; marcado: anel interno 12px `--seed-action-primary-bg`. Card: padding 16, radius 8, borda 1px → 2px turquesa no selecionado + `--seed-surface-raised`. Item inteiro clicável (label envolve). Estados: idle · hover (borda hover) · checked · focus (anel) · disabled · erro (borda do GRUPO não muda — a mensagem do form-field aponta; GOV.UK).

### 9.4 Microcopy

Legend é a pergunta ("Qual solução você procura?"). Erro: "Selecione [a coisa]" — "Selecione a solução desejada". Opção de escape sempre por último ("Ainda não sei").

### 9.5 Código — essência

```html
<fieldset class="seed-field">
  <legend class="seed-field__label">Qual solução você procura?</legend>
  <label class="seed-radio-row"><input type="radio" name="sol" class="seed-radio"><span>Energia solar</span></label>
  <label class="seed-radio-row"><input type="radio" name="sol" class="seed-radio"><span>Gerador (GMG)</span></label>
</fieldset>
```
```css
.seed-radio{appearance:none;width:24px;height:24px;border:2px solid var(--seed-field-border);border-radius:999px;flex:none;display:grid;place-items:center;cursor:pointer}
.seed-radio::after{content:"";width:12px;height:12px;border-radius:999px;background:transparent;transition:background .1s}
.seed-radio:checked{border-color:var(--seed-action-primary-bg)}
.seed-radio:checked::after{background:var(--seed-action-primary-bg)}
.seed-radio:focus-visible{outline:none;box-shadow:var(--seed-focus-ring)}
.seed-radio-row{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer}
```

### 9.6 Os 7 testes

1. Círculo 2px 4.74:1. 2. Marcado = anel interno (forma) + borda (cor) — 2 sinais. 3. Grayscale ok (forma). 4. **Par crítico: radio card selecionado × botão outline** — o círculo visível dentro do card é o distintivo obrigatório (J3). 5. Um grupo = uma pergunta. 6. Marcado visível sem interação. 7. Linha 44px, coluna única no 360. ✅