Componentes
10. Checkbox
seed-componentes.md v1.43 · §10seção 12 de 9810-checkbox-estavel-validado-pelo-rafael-em-2026.md · MD5 87c4e3daTítulo completo no canon: 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#
.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#
- 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. ✅