components
toggle
Switch on/off pra preferências binárias. Diferente de checkbox: toggle aplica mudança imediatamente, checkbox espera submit.
overview
variantes
Default (medium)
Small
tamanhos
Default: track 40×24, knob 18px. Small: 32×18, knob 14px.
estados
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .toggle | class | — | container |
| .toggle-track | class | — | trilho visual |
| .toggle--sm | class | — | variante 32×18 |
| type="checkbox" | input | — | semântica nativa |
| checked | attr | — | estado inicial on |
| disabled | attr | — | desabilita |
quando usar
use
não use
acessibilidade
- role="switch" implícito via input[type="checkbox"]
- aria-checked reflete estado
- Funciona via Tab + Space
- Foco visível com outline 2px
- Label clicável (toda a área .toggle)
código
<label class="toggle">
<input type="checkbox" checked>
<span class="toggle-track"></span>
<span>notificações</span>
</label>