Ir ao conteúdo
SEED engenhariaDesign System

Componentes

9. Radio

estávelseed-componentes.md v1.43 · §09seção 11 de 9809-radio-estavel-validado-pelo-rafael-em-2026-08.md · MD5 d13e9900

Título completo no canon: 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#

<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>

.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. ✅
BancadaSEED DS v2 — Bloco 2 · Preview v0.13 (13/13)abrir em página própria ↗
Esc