Skip to main content

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: