Toggle

Recipe React distribuída como source, com comportamento Base UI e classes/tokens públicos do Toggle TIS.

Preview funcional

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Anatomia

Label text 1 2 3 4

1 Input (.ds-toggle) — <input type="checkbox"> estilizado com role="switch".
2 Track — fundo CSS que muda de cor conforme o estado checked.
3 Thumb — pseudo-elemento CSS que desliza esquerda/direita.
4 Content Frame (.ds-toggle__content) — envolve label, description e helper.

Padrão

Notifications

Com descrição e texto auxiliar

Automatic updates Keep your software up to date with the latest features and security patches. Requires a stable internet connection.

Tamanhos

Small Medium (default) Large

Desabilitado

Disabled off Disabled on

Estados

State	CSS trigger	Visual change	Token
Off	---	Neutral track with dark thumb	`component.toggle.track.fill.off.default`, `component.toggle.thumb.fill.off.default`
Off hover	`:hover`	Darker neutral track/thumb	`component.toggle.track.fill.off.hover`, `component.toggle.thumb.fill.off.hover`
On	`:checked`	Primary track with light thumb	`component.toggle.track.fill.on.default`, `component.toggle.thumb.fill.on.default`
On hover	`:checked:hover`	Darker primary track	`component.toggle.track.fill.on.hover`, `component.toggle.thumb.fill.on.hover`
Focus	`:focus-visible`	2px outline ring	`component.toggle.focus-ring.radius.default + component.focus-ring.*`
Disabled	`[disabled]`	Muted track, thumb and label	`component.toggle.track.fill.*.disabled`, `semantic.content.disabled`

Quando usar

A configuração entra em vigor imediatamente ao ser ligada ou desligada.
O estado atual precisa permanecer visível após a interação.

Quando não usar

A escolha só será aplicada ao enviar um formulário; use Checkbox.
A pessoa precisa escolher uma alternativa entre várias; use Radio.

Composição React

import {
  Switch,
  SwitchContent,
  SwitchLabel,
  SwitchTitle,
} from "@/components/ui/switch"

<SwitchLabel>
  <Switch name="alerts" defaultChecked />
  <SwitchContent>
    <SwitchTitle>Alertas de segurança</SwitchTitle>
  </SwitchContent>
</SwitchLabel>

Status: Beta
Distribuição: Source via shadcn

Instalação

Configure o namespace uma única vez na integração React.

npx shadcn@latest add @tis/switch

pnpm dlx shadcn@latest add @tis/switch

yarn dlx shadcn@latest add @tis/switch

bunx --bun shadcn@latest add @tis/switch

Contrato público

Item do registry: @tis/switch
Provider: Base UI
Distribuição: Source copiado para a aplicação
Status: Beta

Arquitetura técnica

Abrir JSON do registry

Inspecionar source distribuído

Interação por teclado

Tecla	Ação
`Tab`	Move o foco para o toggle
`Space`	Alterna ligado/desligado
`Enter`	NÃO alterna (comportamento padrão de switch)

Toggles desabilitados ([disabled]) são removidos da ordem de tabulação automaticamente pelo navegador.

Accessibility

Critério WCAG	Requisito	Status
4.1.2 Name, Role, Value (A)	`role="switch"` + `aria-checked` gerenciados pelo checkbox nativo	✓
2.4.11 Focus Appearance (AA)	Focus ring visível via `:focus-visible`	✓
2.5.8 Target Size min (AA)	Label estende a área de clique além do toggle	✓
1.4.1 Use of Color (A)	Posição + cor comunicam o estado (thumb desliza esquerda/direita)	✓

Resumo de atributos ARIA

role="switch" — obrigatório no checkbox para que leitores de tela o anunciem como switch.
aria-checked — gerenciado automaticamente pelo <input type="checkbox"> nativo.
O conteúdo textual deve estar dentro de .ds-toggle__content.

Responsabilidade da saída

Preserve a semântica da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável