Pular para o conte√ļdo principal

Switch

Vis√£o geral#

O switch √© um tipo de controle para a√ß√Ķes bin√°rias (ligado/ desligado, verdadeiro/ falso), e √© usado para alternar rapidamente entre as duas op√ß√Ķes.

Ele mostra o status atual de seu controlador e aplica a ação imediatamente após ser alternado, dando aos usuários visibilidade, liberdade e controle sobre suas preferências, não necessitando de um botão para confirmar a ação.

Anatomia#

Estruturalmente, o switch é composto por key e track. Também contém partes que são específicas dos estados de interação, como icon, quando ligado (checked).

Anatomia do switch disposto lado a lado, sendo 1 key, 2 track, 3 icon, 4 border, 5 background e 6 outline

1. Key

2. Track

3. Icon (checked)

4. Border

5. Background

6. Outline (focused)

O switch é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

Comportamento#

O componente switch alterna entre as duas varia√ß√Ķes poss√≠veis:

  • Checked: item marcado, ligado

  • Unchecked: item desmarcado, desligado

Boas pr√°ticas#

O componente foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG 2.1). Tamb√©m foi estruturado com base em padr√Ķes de usabilidade para contribuir com uma boa experi√™ncia. Por isso, ao aplicar esse componente, √© muito importante que sejam levados em considera√ß√£o alguns crit√©rios e pr√°ticas:

Uso#

  • Use o switch em cen√°rios cujo resultado da a√ß√£o aconte√ßa imediatamente ap√≥s a altern√Ęncia da chave, como ajustar configura√ß√Ķes e prefer√™ncias corriqueiras do sistema;
    Componente switch com um rótulo '“'Biometria'Fazer

    A ação resultante da mudança de chave deve ter um resultado imediato para quem usa o sistema, que no exemplo seria ativar a biometria assim que a chave fosse ligada.

    Componente switch com um rótulo '“'Concordo com os termos de uso'Não fazer

    N√£o use switch apenas para marcar sim ou n√£o, sem efeito no sistema. No exemplo, ao ligar a chave, nada aconteceria. O correto seria o uso de um checkbox nesse caso.

  • Ao alternar a chave entre checked e unchecked, o resultado da altern√Ęncia deve ter efeito imediato. N√£o use o switch em situa√ß√Ķes em que √© necess√°rio algum tipo de confirma√ß√£o para aplicar o estado selecionado;
Exemplo de configura√ß√£o de  como receber atualiza√ß√Ķes contendo duas op√ß√Ķes em checkboxes. Abaixo da lista h√° um bot√£o para salvar prefer√™nciasFazer

Opte por usar um checkbox ou radio ao inv√©s do switch em situa√ß√Ķes que necessitem de alguma confirma√ß√£o para que a mudan√ßa seja aplicada.

Mesmo exemplo de configura√ß√£o das atualiza√ß√Ķes e o bot√£o para salvar, mas usando switches nas op√ß√Ķes'N√£o fazer

Não use switch quando o resultado da mudança da chave não puder ter efeito imediato.

  • Em um conjunto de itens, use switches apenas quando cada item puder ser controlado de forma individual e independente;
Configura√ß√£o de acesso a um projeto com 3 op√ß√Ķes em radio: Todos, Membros da equipe e Somente voc√™Fazer

Quando as op√ß√Ķes forem dependentes entre si, opte por usar radio button ao inv√©s do switch

Mesmo exemplo de configura√ß√£o das atualiza√ß√Ķes e o bot√£o para salvar, mas usando switches nas op√ß√Ķes'N√£o fazer

Não use switch quando os itens tiverem qualquer dependência entre eles. Cada chave deve funcionar de forma individual, sem relação com outros controles.

  • Use switch apenas quando for preciso alternar entre dois estados. Quando houver mais de duas op√ß√Ķes, ou elas foram dependentes entre si, utilize outro componente, como o checkbox ou radio;
  • Utilize o componente no estado desabilitado (disabled) quando for preciso demonstrar que naquela circunst√Ęncia n√£o est√° dispon√≠vel, mas que existe a op√ß√£o de altern√Ęncia daquela chave.

Rótulo#

  • Use textos curtos e objetivos para evidenciar a op√ß√£o que a chave controla, bem como o estado em que est√°;
  • Descreva o que o controle far√° quando estiver ligado, evitando textos neutros ou amb√≠guos. Para verificar se est√° fazendo sentido, leia o r√≥tulo acrescentando ‚Äúligado / desligado‚ÄĚ ao final. Caso n√£o fa√ßa sentido, reescreva;
  • D√™ prefer√™ncia por posicionar o r√≥tulo ao lado direito do componente no desktop e mantenha o padr√£o sempre que poss√≠vel. O posicionamento √† esquerda √© mais indicado para contextos predominantemente mobile;
  • Evite incluir no r√≥tulo termos como ativo/ inativo, on/off, pois fica redundante com o componente;
  • Quando o switch estiver acompanhado de um r√≥tulo, √© recomendado que a √°rea clic√°vel envolva esse elemento tamb√©m.
Componente switch com um rótulo 'Bluetooth'Fazer

Use textos curtos e objetivos, pois ajudam no entendimento de qual função aquela chave controla.

Componente switch com um rótulo 'Deseja ativar o bluetooth agora?'Não fazer

Evite usar textos longos e redundantes.

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas. S√£o elas:

  • O switch foi desenvolvido com uso de controles padr√Ķes HTML, o que permite a identifica√ß√£o do mesmo na interface por tecnologias assistivas. (WCAG 4.1.2: Name, Role, Value)
  • O componente prev√™ intera√ß√£o por teclado, fazendo a altern√Ęncia entre a chave atrav√©s da tecla space (WCAG 2.4.1 - Keyboard)
  • O foco √© vis√≠vel e possui uma espessura superior a 2 pixels CSS, n√£o ficando escondido por outros elementos da tela. (WCAG 2.4.12: Focus Appearance)
  • A diferencia√ß√£o entre os estados ligado e desligado √© feita atrav√©s das cores, mudan√ßa de posi√ß√£o da chave, e tamb√©m com o uso de um √≠cone. (WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification)