Switch
Uma chave de liga e desliga para um ajuste, com o estado escrito ao lado. Vale quando a pessoa salva, como qualquer campo.
Nesta página
Playground
Estado
Fundo
<label class="feitio-switch" data-on="Ligado" data-off="Desligado"><input type="checkbox" role="switch">Avisos por e-mail<span class="state">Desligado</span></label>Quando usar
- Para ligar ou desligar um ajuste numa página de ajustes: os lembretes, um aviso, um recurso.
Quando não usar
- Para concordar com algo (termos, permissões): Checkbox.
- Para escolher entre opções: Radios ou SegmentedControl.
Exemplos
Num formulário de ajustes
A chave muda o estado escrito na hora, mas o ajuste só vale quando a pessoa salva; o retorno aparece no formulário.
Mostrar código
<label class="feitio-switch">
<input type="checkbox" role="switch" name="lembretes" checked>
Lembretes do dia
<span class="state">Ligado</span>
</label>Estados
Acessibilidade
- É uma caixa de marcar com
role="switch": o leitor de tela anuncia "ligado" ou "desligado". - O estado também por escrito, ao lado: a posição da bolinha não basta.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-switch" | no <label> | A chave, o texto e o estado. |
role="switch" | no input | O leitor de tela anuncia ligado ou desligado. |
class="state" | o estado | "Ligado" ou "Desligado", por escrito. |