Checkbox
Controle de seleção múltipla. Permite marcar, desmarcar e estado indeterminado. Dark mode automático via tokens semânticos.
Estados
Padrão, selecionado, desativado e desativado selecionado. O hover aparece ao passar o mouse.
Carregando exemplo...
Indeterminado
Usado quando um grupo tem seleção parcial. Deve ser ativado via JavaScript.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .checkbox | Label wrapper, flex horizontal, gap 12px |
| Input | .checkbox-input | Input nativo escondido (acessibilidade) |
| Box | .checkbox-box | Caixa 20x20, borda 1px, radius 4px |
| Check | ::after | Ícone de check (pseudo-elemento, borda branca) |
| Minus | ::before | Ícone de minus para indeterminado (pseudo-elemento) |
| Label | .checkbox-label | Inter 14px medium, line-height 24px |
Propriedades
Classes disponíveis para configurar o checkbox.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.checkbox | classe | — | Container principal (label). |
.checkbox-input | classe | — | Input nativo escondido. |
.checkbox-box | classe | — | Caixa visual com check via ::after e minus via ::before. |
.checkbox-label | classe | — | Texto do label. |
Código
Snippets prontos para copiar e usar no seu projeto.
Checkbox simples
html
<label class="checkbox">
<input type="checkbox" class="checkbox-input">
<span class="checkbox-box"></span>
<span class="checkbox-label">Aceito os termos</span>
</label>Checkbox marcado
html
<label class="checkbox">
<input type="checkbox" class="checkbox-input" checked>
<span class="checkbox-box"></span>
<span class="checkbox-label">Opção selecionada</span>
</label>Indeterminado
html
<label class="checkbox">
<input type="checkbox" class="checkbox-input" id="select-all">
<span class="checkbox-box"></span>
<span class="checkbox-label">Selecionar todos</span>
</label>
<script>
document.getElementById('select-all').indeterminate = true;
</script>Desativado
html
<label class="checkbox">
<input type="checkbox" class="checkbox-input" disabled>
<span class="checkbox-box"></span>
<span class="checkbox-label">Indisponível</span>
</label>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--border-base-neutral-strong | Borda padrão da box |
--border-base-neutral-default | Borda no estado desativado |
--border-base-brand-default | Outline de foco |
--surface-base-neutral-container-deep | Background no hover |
--surface-base-neutral-container-emphasis | Background no disabled+checked |
--surface-base-brand-container-medium | Background no checked |
--icon-base-neutral-white | Cor do check/minus |
--icon-base-neutral-subtle | Cor do check/minus desativado |
--text-base-neutral-default | Cor do label |
--text-base-neutral-subtle | Cor do label desativado |
--spacing-1 | Border-radius da box (4px) |
--spacing-3 | Gap entre box e label (12px) |