Componentes — 06

Checkbox & Radio

Controles de seleção com checkmark SVG customizado e ponto interno para Radio. Foco neo-brutalista com sombra offset 2×2.

06.1

Checkbox — Estados

Clique para alternar. O checkmark usa stroke-dashoffset para animar a entrada da marca.

Default · Error · Success · Disabled

Você deve aceitar para continuar

Informação confirmada

06.2

Checkbox — Grupo

Use CheckboxGroup para agrupar opções relacionadas com label de seção em monospace uppercase.

CheckboxGroup
Forças de interesse
<CheckboxGroup label="Forças de interesse">
  <Checkbox label="Exército Brasileiro" checked={...} onChange={...} />
  <Checkbox label="Marinha do Brasil" checked={...} onChange={...} />
</CheckboxGroup>
06.3

Radio — Estados

Radio para seleção exclusiva. Use o mesmo name para agrupar opções mutuamente exclusivas.

RadioGroup — seleção única
Situação do militar
<RadioGroup label="Situação do militar">
  <Radio name="situacao" label="Ativo" value="ativo" checked={...} onChange={...} />
  <Radio name="situacao" label="Da Reserva" value="reserva" checked={...} onChange={...} />
</RadioGroup>
Radio com estado de erro
Modalidade de prova *

Selecione uma modalidade

<RadioGroup inputState="error" helperText="Selecione uma modalidade">
  <Radio inputState="error" ... />
</RadioGroup>
06.4

Exemplo de Formulário

Combinação de CheckboxGroup e RadioGroup em um formulário de perfil.

Preferências de inscrição
Forças de interesse
Situação atual
06.5

Tokens Usados

border--border-strong2px solid #433c34
checkmark color--accentvar(--b-700) #1f4d2a
radio dot--accent7px circle, var(--accent)
focus shadow--accent2px 2px 0 var(--accent)
border-radius (checkbox)--radius-sm2px
border-radius (radio)999pxCircular
label font--font-body'Barlow' 14px
group label font--font-mono11px uppercase