---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 10
titulo: "Checkbox — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)"
sequencia: 12 de 98
bytes_do_corpo: 3616
md5_do_corpo: 87c4e3daea5be3a3ff160187544e4987
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
---
## 10. Checkbox — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)

> **Base (3 rodadas):** R1 — GOV.UK/NHS checkboxes (exclusive "None", divisor "ou"), Carbon (indeterminate). R2 — Fluent (checkbox=STATUS × switch=AÇÃO — a fronteira da família), M3 parent-child, MUI. R3 — GDPR art. 7/LGPD art. 8 (pré-marcado inválido; granularidade por finalidade). I1–I6 conferidas no consolidado.

### 10.1 Papel

2–6 escolhas independentes visíveis (várias permitidas) OU binário de STATUS confirmado no submit (consentimento, "li e aceito" — régua §7.1 emendada). Grupo = fieldset+legend + hint "Selecione todas que se aplicam" (I1).

### 10.2 Decisões I1–I6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| I1 | fieldset+legend + hint padrão | GOV.UK; leitores leem a legend com cada item | Grupo sem pergunta explícita |
| I2 | Opção exclusiva "Nenhuma das anteriores" separada por divisor "ou"; marcá-la DESMARCA as outras (e vice-versa), com anúncio na live region | GOV.UK/NHS: sem ela, "nenhuma" é indistinguível de "não respondi" | Validação que rejeita conflito depois (deixa errar pra corrigir) |
| I3 | Indeterminate (`aria-checked="mixed"` via JS `el.indeterminate`) SÓ como pai selecionar-tudo (tabelas/árvores — ponte Bloco 6); nunca em formulário simples | Carbon/M3 parent-child | Indeterminate decorativo |
| I4 | Fronteira Fluent: STATUS/commit adiado → checkbox · AÇÃO imediata → switch (§8); filtros de lista → checkbox | Organiza a família inteira | "Switch porque é bonito" |
| I5 | **Consentimento: NUNCA pré-marcado, e GRANULAR — um checkbox por finalidade** (aceitar termos ≠ receber marketing); vale para toda captação SEED | GDPR art. 7 / LGPD art. 8: consentimento livre, informado, inequívoco; pré-marcado é juridicamente inválido | Opt-out pré-marcado (ilegal); checkbox único "aceito tudo" |
| I6 | Item inteiro clicável; caixa 24px, hit 44 | GOV.UK/WCAG 2.5.8 | Clicável só no quadradinho |

### 10.3 Anatomia e tokens

Caixa 24px radius 4, borda 2px; marcado: fundo `--seed-action-primary-bg` + check branco (SVG stroke 2.5); indeterminate: traço horizontal. Estados = §9.3. Check aparece com scale 90→100% 100ms (reduced-motion: seco).

### 10.4 Microcopy

Legend pergunta; consentimento SEMPRE nomeia a finalidade e o canal: "Aceito receber conteúdos sobre energia solar por e-mail" — nunca "Aceito os termos e comunicações".

### 10.5 Código — essência

```css
.seed-check{appearance:none;width:24px;height:24px;border:2px solid var(--seed-field-border);border-radius:4px;flex:none;display:grid;place-items:center;cursor:pointer;transition:background .1s,border-color .1s}
.seed-check:checked{background:var(--seed-action-primary-bg);border-color:var(--seed-action-primary-bg)}
.seed-check:checked::after{content:"";width:12px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.seed-check:indeterminate{background:var(--seed-action-primary-bg);border-color:var(--seed-action-primary-bg)}
.seed-check:indeterminate::after{content:"";width:12px;height:2.5px;background:#fff}
.seed-check:focus-visible{outline:none;box-shadow:var(--seed-focus-ring)}
```

### 10.6 Os 7 testes

1. Borda 4.74:1; fundo marcado 4.54:1 com check branco. 2. Marcado = fundo + forma do check. 3. Grayscale ok. 4. Par checkbox × radio: quadrado × círculo (forma). 5. Um checkbox = uma afirmação. 6. Visível sem interação. 7. 44px, exclusive "ou" legível no 360. ✅