Checkboxes
Checkboxes brutalistas com input oculto, caixa customizada e checkmark via CSS puro. 3 tamanhos, estados de erro e grupos horizontal/vertical.
Checkbox Basico
Preview
HTML
<label class="canta-checkbox">
<input type="checkbox" class="canta-checkbox__input">
<span class="canta-checkbox__box"></span>
<span class="canta-checkbox__label">Aceito os termos</span>
</label>Estados
Checked / Disabled / Error
HTML
<!-- Checked -->
<label class="canta-checkbox">
<input type="checkbox" class="canta-checkbox__input" checked>
<span class="canta-checkbox__box"></span>
<span class="canta-checkbox__label">Marcado</span>
</label>
<!-- Disabled -->
<label class="canta-checkbox">
<input type="checkbox" class="canta-checkbox__input" disabled>
<span class="canta-checkbox__box"></span>
<span class="canta-checkbox__label">Desabilitado</span>
</label>
<!-- Error -->
<label class="canta-checkbox canta-checkbox--error">
<input type="checkbox" class="canta-checkbox__input">
<span class="canta-checkbox__box"></span>
<span class="canta-checkbox__label">Com erro</span>
</label>Tamanhos
Small / Default / Large
HTML
<label class="canta-checkbox canta-checkbox--sm">...</label>
<label class="canta-checkbox">...</label>
<label class="canta-checkbox canta-checkbox--lg">...</label>Checkbox Group
Vertical (padrao)
Notificacoes
Horizontal
Categorias
HTML
<!-- Vertical (padrao) -->
<div class="canta-checkbox-group">
<div class="canta-checkbox-group__label">Notificacoes</div>
<label class="canta-checkbox">
<input type="checkbox" class="canta-checkbox__input">
<span class="canta-checkbox__box"></span>
<span class="canta-checkbox__label">E-mail</span>
</label>
<!-- ... -->
</div>
<!-- Horizontal -->
<div class="canta-checkbox-group canta-checkbox-group--horizontal">
<div class="canta-checkbox-group__label">Categorias</div>
<label class="canta-checkbox">...</label>
<label class="canta-checkbox">...</label>
</div>API
| Classe | Descricao |
|---|---|
.canta-checkbox | Classe base do checkbox (label wrapper, obrigatoria) |
.canta-checkbox__input | Input hidden real (type="checkbox") |
.canta-checkbox__box | Caixa visual customizada com checkmark CSS |
.canta-checkbox__label | Texto do label |
.canta-checkbox--error | Estado de erro (borda e fundo vermelhos) |
.canta-checkbox--sm | Tamanho pequeno (20px) |
.canta-checkbox--lg | Tamanho grande (28px) |
.canta-checkbox-group | Container para agrupar checkboxes (vertical) |
.canta-checkbox-group--horizontal | Layout horizontal para o grupo |
.canta-checkbox-group__label | Titulo do grupo (uppercase, bold) |
checked | Atributo HTML nativo para marcar |
disabled | Atributo HTML nativo para desabilitar |