Switch

Controle de alternância on/off. O label fica à esquerda do track. Dark mode automático via tokens semânticos.

components/switch.cssAbrir no Figma

Estados

Padrão (off), ativo (on), desativado e desativado ativo. O hover escurece o thumb.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	.switch	Label wrapper, flex horizontal, gap 12px
Input	.switch-input	Checkbox nativo escondido
Label	.switch-label	Inter 14px medium, posicionado antes do track
Track	.switch-track	Trilha 40x20, radius full
Thumb	.switch-thumb	Botão 16x16, desliza 20px quando ativo

Propriedades

Classes disponíveis para configurar o switch.

Propriedade	Tipo	Default	Descrição
.switch	classe	—	Container principal (label).
.switch-input	classe	—	Input checkbox nativo escondido.
.switch-label	classe	—	Texto do label (antes do track).
.switch-track	classe	—	Trilha do switch (40x20).
.switch-thumb	classe	—	Botão deslizante (16x16).

Código

Snippets prontos para copiar e usar no seu projeto.

Switch com label

<label class="switch">
    <input type="checkbox" class="switch-input">
    <span class="switch-label">Notificações por email</span>
    <span class="switch-track">
        <span class="switch-thumb"></span>
    </span>
</label>

Switch ativo

<label class="switch">
    <input type="checkbox" class="switch-input" checked>
    <span class="switch-label">Modo escuro</span>
    <span class="switch-track">
        <span class="switch-thumb"></span>
    </span>
</label>

Switch sem label

<label class="switch">
    <input type="checkbox" class="switch-input">
    <span class="switch-track">
        <span class="switch-thumb"></span>
    </span>
</label>

Desativado

<label class="switch">
    <input type="checkbox" class="switch-input" disabled>
    <span class="switch-label">SMS (indisponível)</span>
    <span class="switch-track">
        <span class="switch-thumb"></span>
    </span>
</label>

Tokens utilizados

Variáveis semânticas aplicadas ao componente.

Token	Uso
--surface-base-neutral-container-emphasis	Background do track (off e disabled)
--surface-base-brand-container-medium	Background do track (on)
--icon-base-neutral-white	Cor do thumb (on)
--icon-base-neutral-secondary	Cor do thumb (off)
--icon-base-neutral-default	Cor do thumb (hover)
--icon-base-neutral-subtle	Cor do thumb (disabled)
--text-base-neutral-default	Cor do label
--text-base-neutral-subtle	Cor do label (disabled)
--border-base-brand-default	Outline de foco
--spacing-3	Gap entre label e track (12px)

Versão2.0.0

Última atualização2026-03-17

Caminhocomponentes/switch.md