Toggle/Switch

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-stylesAinda não disponível
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Switch é um controle binário utilizado para alternar entre dois estados opostos (ligado/desligado). Ele deve ser aplicado em configurações que exigem uma resposta imediata do sistema após a interação.

Diretrizes de Comportamento

Efeito Imediato: Use apenas quando a alteração não exigir um botão de confirmação posterior.
Rótulos Diretos: O rótulo deve descrever o que o Switch faz quando está “ligado”. Use Caixa de Sentença.
Vá Direto ao Ponto: Não use rótulos que mudam conforme o estado (ex: não troque “Ativado” por “Desativado”). O rótulo deve ser estático e o componente indica o estado.
- Certo: Notificações de SMS (O switch indica se está on/off).
Neutralidade: Evite perguntas.
- Ruim: Você deseja ativar o GPS?
- Melhor: Rastreador GPS.

Exemplos de Escrita (Dos & Don’ts)

Contexto Logístico	Estilo Incorreto (Vago/Pessoal)	Estilo UX (Conciso/Direto)
Visibilidade	Mostrar motoristas que estão fora de serviço	Motoristas offline
Sistema	Ativar o envio automático de e-mails agora	Envio automático de e-mail
Interface	Modo de visualização em alta densidade	Visualização compacta

Sugestão de padronização

O termo Toggle é genérico (pode ser um Toggle Button ou Accordion). O termo Checkbox refere-se a um comportamento de lista/seleção. O Switch (Interruptor) é o nome oficial no Material Design e na maioria das bibliotecas modernas (React, Vue, mobile iOS/Android).
Ação: Renomear o componente no Figma para Switch e tratar o Angular como um “Switch Component”, mesmo que tecnicamente seja um checkbox estilizado.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

Angular (mds-angular)

Seletor

mds-checkbox

Uma caixa de seleção é um controle de entrada que permite ao usuário selecionar uma ou mais opções de uma série de escolhas.

Inputs

Input	Tipo	Padrão	Descrição
`formControl`	`UntypedFormControl \| undefined`	`undefined`	FormControl do campo
`additionalClass`	`string`	`''`	Classe adicional
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	`''`	Label do checkbox
`size`	`MdsSizesSmall`	`'md'`	Tamanhos para o checkbox do tipo `group`
`mode`	`MdsCheckboxModes`	`'single'`	Tipo de checkbox: * `single` - normal * `group` - grupo de seleção (estilo botão) * `switch` - Interruptor - liga e desliga
`icon`	`MdsIconAlias \| undefined`	`undefined`	Icone do para o checkbox do tipo `group`
`iconSize`	`MdsIconSizes`	`'md'`	Tamanho do icone.
`name`	`string`	`'opcao'`	Nome do campo
`required`	`boolean`	`false`	Campo requerido
`disabled`	`boolean`	`false`	Campo desativado
`checked` ⇄	`boolean`	`false`	Campo checado
`labelPosition`	`MdsCheckboxLabelPositions`	`'right'`	Posição do label com relação ao campo
`loading`	`boolean`	`false`	Exibe loading de carregando

⇄ = binding bidirecional ([(input)]).

Outputs

Output	Payload	Descrição
`onChange`	`boolean`	Eventos

Slots

Conteúdo projetado com o atributo data-position:

data-position="after-label"
data-position="after-content"
data-position="content-right"
data-position="after-switch"
data-position="switch-bottom"
data-position="switch-right"

Toggle/Switch — Figma (Design System 2.0) ↗