Pular para o conteúdo
Faculdade PhorteDesign System

Toggle

Em andamento

Interruptor liga/desliga com efeito imediato, como uma luz: role="switch", trilho verde quando ligado e o polegar deslizando. Tem descrição opcional e estado de erro.

Função
Formulário e ação
Também chamado de
interruptor, switch, chave, liga e desliga
Mora em
app/components/atoms/Toggle.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Ligado, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Ligado
  2. Desligado
  3. Desabilitado

Quando usar

Para uma preferência que vale na hora em que muda — receber lembretes, mostrar legendas.

Faça

  • Escreva o rótulo como o que fica ligado: "Lembretes por e-mail".
  • Aplique o efeito na hora da mudança — é o que o interruptor promete.
  • Use description para explicar o efeito sem alongar o nome.

Evite

  • Pedir confirmação ("Salvar") depois de mudar um interruptor — aí é Checkbox.
  • Rótulos "Ligado/Desligado" no lugar do nome: o leitor já anuncia o estado.

Quando não usar. Para uma escolha que só vale ao enviar o formulário (aceitar termos, opções de inscrição), use o Checkbox.

Nota de uso

É interruptor, role="switch": o efeito é imediato, como ligar uma luz. Para escolha que só vale ao enviar o formulário, use o Checkbox. O trilho desligado tem limite em --border-interactive. A description é ligada por aria-describedby e fica fora do nome. Erro vindo do FormField aparece como anel vermelho e ícone ao lado do rótulo — estado nunca só por cor.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Trilho — 44 × 24px; desligado em `--muted` com borda de controle, ligado em `--secondary`.
  2. Polegar — 18px, branco, com 2px de folga para todos os lados nos dois estados.
  3. Rótulo — Texto `text-sm` ao lado; com erro, um ícone de alerta antes dele.
  4. Descrição — Linha embaixo, fora do nome, ligada por `aria-describedby`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
DesligadoTrilho claro com borda --border-interactive; polegar à esquerda.
LigadoTrilho e borda --secondary (verde); polegar desliza 20px para a direita.
FocoAnel ring-ring de 2px em volta do trilho, só no teclado.
Erroaria-invalid: anel vermelho no trilho e ícone de alerta ao lado do rótulo.
DesabilitadoLinha a 50%, cursor proibido e fora do Tab — medido.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique no trilho ou no textoLiga ou desliga — a linha é o <label> do controle.

Relacionados