Formulário

Checkbox

Marcado, vazio e parcial, com o check desenhando em mola.

data-u="indeterminate"

Exemplo

Notificar Resumo diário Parcial

<label class="u-check"><input type="checkbox" checked><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Notificar</label>
<label class="u-check"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Resumo diário</label>
<label class="u-check" data-u="indeterminate"><input type="checkbox"><span class="u-check__box"><svg viewBox="0 0 16 16"><path class="u-tick" d="m3.5 8.4 3 3 6-6.8"/><path class="u-dash" d="M4 8h8"/></svg></span>Parcial</label>

Instalação

Checkbox vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Classes e variantes

Classe	O que faz
`u-check`	O label que envolve input e caixa.
`u-check__box`	A caixa desenhada. O svg traz o check (`u-tick`) e o traço do parcial (`u-dash`).
`data-u="indeterminate"`	No label: o checkbox começa parcial e cicla parcial, marcado e vazio. É demonstração.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
checked	atributo nativo	Marcado.
indeterminate	propriedade do input	Parcial. Defina por JS: input.indeterminate = true.
`aria-checked="mixed"`	no input, pelo indeterminate	O registro indeterminate mantém o `aria-checked` em mixed, true ou false.

Teclado

Tecla	Faz
Tab	foca o checkbox
Espaço	marca e desmarca