Toggle
Resumo
Toggle é usado para alternar entre dois estados: geralmente ligado ou desligado ou “verdadeiro” e “falso”. Geralmente usado quando possui apenas 1 opção disponível de mudança. É aplicado comumente em configurações de sistemas e preferências de aplicativos.
Quando usar o toggle no lugar do checkbox único?
Elementos como radiobutton e checkbox devem ser utilizados somente para a criação de formulários, ou seja, você utiliza quando necessita fazer uma ação posterior para o efeito do componente ocorrer.
Anatomia
O input por si só não possui acessórios, ele pode ter labels que não fazem parte do componente para facilitar o entendimento da informação.
Qual o posicionamento ideal da label?
Não existe regra fixa, mas geralmente, para interfaces:
Mobile: Alinhado à esquerda
Desktop: Alinhado à direita
Estados
Cada estado tem um jeito de ser mostrado visualmente:
Inative: Bolinha do lado esquerdo e uma cor que indique que o toggle está “off”
Active: Bolinha do lado direito e a cor primária da marca ou verde geralmente
Disabled: 50% da opacidade, indica que não é possivel alternar o estado
Focused: Usado para navegação via teclado com espessura mínima de 3px, offset do botão (2–4px), cor de contraste com fundo 3:1 mínimo
Acessibilidade
A
O estado on/off não pode ser diferenciado apenas por cor (WCAG 1.4.1).
Instruções para usar o toggle não podem depender só de característica sensorial (WCAG 1.3.3).
AA
Se o toggle tem label de texto, esse texto precisa de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
O contorno do track, a bolinha e qualquer elemento que identifique o estado do toggle precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
A área de toque do toggle precisa ser de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível quando o toggle é alcançado por teclado (WCAG 2.4.7).
AAA
Label do toggle com contraste de 7:1 contra o fundo (WCAG 1.4.6).
Área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do componente e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Boas práticas
O design de um Toggle deve ser intuitivo para evitar erros de interpretação
Contraste de Cores: É vital que os estados “on” e “off” tenham cores contrastantes. O uso do verde para indicar sucesso ou estado ativo, e cinza para inativo, é uma convenção comum (herdada de sistemas como iOS) que facilita a leitura visual.
Feedback Claro: O usuário deve perceber instantaneamente se a ação foi executada com sucesso através da mudança visual do componente.
Quanto mais clara for a label, mais fácil será para o usuário entendê-la
Evite fornecer um rótulo que explique a função do botão: O ícone da interface que você cria, combinado com as aparências de fundo alternativas que você fornece, ajuda as pessoas a entenderem o que o botão faz.
Prefira um botão para configurações que você deseja destacar.
Em geral, não substitua uma checkbox por um toggle
Se você já estiver usando uma caixa de seleção em sua interface, provavelmente é melhor continuar usando-a.
Outras variações
Conhecido na Human Interface Guidelines como alavanca, segundo o padrão Apple, os toggles só devem ser utilizados em formatação de lista, em outros casos utiliza-se as lever
Referências
https://componentes.design/aulas/toggle
https://www.nngroup.com/articles/toggle-switch-guidelines/
https://developer.apple.com/design/human-interface-guidelines/toggles
https://balsamiq.com/learn/on-off-switches/