Interruptor
Os interruptores permitem que os usuários ativem ou desativem uma opção individual. Eles geralmente são usados para ativar ou desativar uma configuração específica.
Opções
#Etiqueta
- Os interruptores devem sempre ter etiquetas;
- Quando o rótulo não é definido, um interruptor se torna autônomo;
- Os interruptores autônomos devem ser usados apenas quando sua conexão com outros componentes for clara e fornecerem contexto suficiente — por exemplo, em painéis de aplicativos.
#Seleção
- Os interruptores podem ser selecionados ou não selecionados;
- Eles não podem estar em um estado indeterminado (ao contrário das caixas de seleção);
- Quando um interruptor representa vários valores que não são idênticos, o interruptor deve aparecer como não selecionado.
#Tamanho
- Os interruptores vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
- O tamanho médio é a opção padrão e mais usada;
- Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página.
#Ênfase
- Por padrão, os interruptores não são enfatizados (cinza). Esta versão é ideal para quando o interruptor não é a parte principal de uma interface, como em painéis de aplicativos, onde todos os componentes visuais são monocromáticos para direcionar o foco para o conteúdo.
- A versão enfatizada (verde) fornece um destaque visual ideal para formulários, configurações, listas ou grades de ativos e outras situações em que uma mudança precisa ser notada.
#Desativado
- Um interruptor em um estado desabilitado mostra que existe uma seleção, mas não está disponível naquela circunstância;
- Isso pode ser usado para manter a continuidade do layout e comunicar que uma ação pode ficar disponível posteriormente.
#Somente leitura
- Os interruptores têm uma opção somente leitura para quando estão no estado desabilitado, mas ainda precisam que seus rótulos sejam exibidos;
- Isso permite que o conteúdo seja copiado, mas não interagido ou alterado.
#Somente leitura
- As caixas de combinação têm uma opção somente leitura para quando o conteúdo no estado desabilitado ainda precisa ser exibido;
- Isso permite que o conteúdo seja copiado, mas não interagido ou alterado;
- Uma caixa de combinação não tem uma opção somente leitura se nenhuma seleção tiver sido feita.
Comportamentos
#Foco do teclado
- Um interruptor pode ser navegado usando um teclado;
- O estado de foco do teclado pega o estado de foco visual do comutador e adiciona um anel verde ao interruptor em foco.
#Estouro de texto
- Quando a etiqueta é muito longa para o espaço horizontal disponível, ela é quebrada para formar outra linha.
Diretrizes de uso
#Interruptor ou caixa de seleção?
- Os interruptores são mais bem usados para comunicar a ativação (por exemplo, estados de ligado/desligado), enquanto as caixas de seleção são mais bem usadas para comunicar a seleção (por exemplo, várias linhas de tabela);
- Os interruptores, ao contrário das caixas de seleção, não podem ter um estado de erro.
#Representando valores mistos
- Quando um interruptor representa vários valores que não são idênticos, o switch deve aparecer como não selecionado;
- Qualquer clique ou toque subsequente deve selecionar a chave e atualizar todos os valores a serem selecionados;
- Outro clique ou toque depois disso deve desmarcar a opção e atualizar todos os valores para não serem selecionados.