Toggle (chave liga-desliga)

Controle de dois estados que liga ou desliga algo na hora, em um toque.

Hard

O que é

Toggle e o controle binario, ou seja, ele tem exatamente dois estados e trocar entre eles leva uma unica acao. Ele lembra um interruptor fisico, com o botao deslizando pra esquerda ou pra direita e a cor sinalizando se esta ativo.

A pergunta mais comum e quando usar toggle em vez de checkbox, e a diferenca e mais funcional do que visual. O toggle implica algo imediato: a pessoa mexe e o estado do sistema muda agora, sem precisar confirmar. Quem liga o dark mode, por exemplo, espera a tela mudar na hora. Se a tela ainda pede um Salvar depois, entao o controle deveria ser um checkbox.

Isso porque o checkbox implica envio: ele faz parte de um formulario que a pessoa confirma mais tarde. A regra de bolso ajuda a decidir: se o efeito acontece no instante do toque, use toggle; se faz parte de algo que sera enviado depois, use checkbox. E vale sempre deixar claro qual estado esta ativo, usando cor, posicao e rotulo.

Em uma frase

Pro dark mode a gente usa toggle, porque o efeito acontece na hora, sem precisar de Salvar.

A pergunta que ele responde

Esse controle deve ser toggle ou checkbox?

Quando usar

Faz sentido quando o efeito da troca acontece no instante do toque, sem precisar de confirmacao.

Como não usar

O cuidado e nao usar toggle num controle que so vale depois de clicar Salvar, e nao rotular a acao (Ativar) em vez do estado, porque isso deixa ambiguo se a coisa ja esta ligada.

Na prática

Pense numa tela de ajustes que usa toggle pro dark mode, que muda na hora, e deixa os checkboxes pro formulario que tem botao Salvar. Cada controle combina com o momento em que o efeito acontece.

Não confunda com

Vale separar toggle de checkbox. O toggle muda o estado na hora, sem confirmar, enquanto o checkbox faz parte de um formulario que so vale depois de enviado. A pergunta certa e simples: o efeito acontece agora ou depois de um Salvar?

D

Em inglês

Toggle Switch

Pronúncia

to-gou

Também chamado de

toggle, switch, chave liga-desliga, interruptor

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre Toggle-Switch Guidelines