# Switch

Uma chave de liga e desliga para um ajuste, com o estado escrito ao lado. Vale quando a pessoa salva, como qualquer campo.

## Playground

```html
<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

```html
<label class="feitio-switch">
  <input type="checkbox" role="switch" name="lembretes" checked>
  Lembretes do dia
  <span class="state">Ligado</span>
</label>
```

## Estados

Desligado

LembretesDesligado

Ligado

LembretesLigado

Desativado

LembretesDesligado

## 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.