Formulário

Switch

Liga e desliga na hora, sem botão de salvar.

só CSS

Exemplo

Notificações Modo foco

<label class="u-switch"><input type="checkbox" role="switch" checked><span class="u-switch__track"></span>Notificações</label>
<label class="u-switch"><input type="checkbox" role="switch"><span class="u-switch__track"></span>Modo foco</label>

Instalação

Switch vem no pacote completo, em unslop.css:

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

Sem build É só CSS: com unslop.css na página, as classes já funcionam.

Classes e variantes

Classe	O que faz
`u-switch`	O label que envolve input e trilho.
`u-switch__track`	O trilho com a bolinha.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
`role="switch"`	no input checkbox	Leitor de tela anuncia ligado e desligado.
checked	atributo nativo	Ligado.

Teclado

Tecla	Faz
Tab	foca o switch
Espaço	liga e desliga