Skip to main content

Switch

O componente Switch é um tipo de controle para ações binárias (ligado/ desligado, verdadeiro/ falso), e é usado para alternar rapidamente entre as duas opções.

Quando usar?​

  • Situações que necessitem de alguma confirmação para que a mudança seja aplicada.
  • 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.

Como usar?​

  • Use textos curtos, concisos, claros para indicar a ação;
  • O tamanho do texto será definido pelo conteúdo, podendo ter 1 linha ou mais. A regra é que a caixa terá tamanho fixo e estará alinhada com o texto no topo e a esquerda.

Anatomia​

alt text

Tamanhos​

alt text

Espaçamento e estados​

O padrão para grupos:

  • Grupo vertical: 8px
  • Grupo horizontal: 16px

O switch possui dois principais estados: ligado (On) e desligado (Off).

alt text

Além deles:

  • Default ou enabled: quando está ativo, mas um usuário não está interagindo diretamente com ele;
  • Focus: quando um usuário clica ou utilizar o teclado (TAB) no botão, ela se torna focada, indicando que o usuário navegou com sucesso para o componente;
  • Hover: quando o usuário passa o mouse sobre o componente, mostrando que é possível interagir com o elemento;
  • Disabled: quando o usuário não tem permissão para interagir com o componente.

alt text

Comportamento​

  • Switch default: é o padrão, sendo necessário para exibir label e action text. Muito usado para formulários e pode aparecer em páginas completas de informações sem restrições de espaço;
  • Switch small: usado em espaços pequenos e aparece alinhado com outros componentes ou conteúdo, como: em uma linha de tabela de dados;
  • Ícone: deve ser mantido no estado ativo (on), reforçando o estado ativo e eliminando a label ou action text;
  • Linguagem simples: comunicar de forma clara a função a ser ativa ou desativada;
  • Resposta ao toque: deve responder de forma ágil ao usuário;
  • Feedback de erro: se uma ação não puder ser executada, forneça feedback claro ao usuário;
  • Prevenção de erros: se uma ação ativada pelo componente tem consequências importantes, implemente segurança, como uma confirmação ao usuário.