Switch
Liga ou desliga uma configuração com efeito imediato.
Playground
Tamanho
<Switch id="notif" defaultChecked /> <Label htmlFor="notif">Notificações por e-mail</Label>
Quando usar
- ✓Preferência que vale na hora (notificações, modo compacto)
Evite quando
- A mudança só vale depois de salvar→ Checkbox dentro do formulário
- Estado de um botão de barra de ferramentas→ Toggle
Variantes e props
sizepadrão: defaultdefaultsm
Estados
checkeduncheckedfocus-visibledisabled
Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).
Acessibilidade
- Papel
- switch
- Teclado
- Espaço alterna
- Com Label dizendo o que liga, não 'Ativar'