O Atributo switch: Toggle Switch Nativo no HTML

Todo toggle switch na web até hoje era um <input type="checkbox"> disfarçado com CSS, mais um role="switch" colado à mão para a acessibilidade fazer sentido. O novo atributo switch em <input type="checkbox"> torna esse padrão nativo: o navegador passa a renderizar o controle como um switch de verdade, com semântica ARIA de switch embutida, sem uma linha de JavaScript.

Como funciona

Basta adicionar o atributo booleano switch a um checkbox comum. O comportamento continua sendo o de um checkbox — mesmo evento change, mesma propriedade checked, mesmo funcionamento em formulários — só a aparência e a semântica de acessibilidade mudam:

<label>
    <input type="checkbox" switch>
    Notificações por e-mail
</label>

Em vez de expor role="checkbox" para leitores de tela, o navegador expõe role="switch" automaticamente, e anuncia "ligado"/"desligado" em vez de "marcado"/"desmarcado" — sem precisar declarar nada disso manualmente.

Estado inicial e leitura em JavaScript

Como continua sendo um checkbox, o estado inicial é definido com checked e lido/alterado exatamente como sempre:

<input type="checkbox" switch checked id="modo-escuro">

const toggle = document.getElementById('modo-escuro');

toggle.addEventListener('change', () => {
    document.documentElement.classList.toggle('dark', toggle.checked);
});

Nenhuma API nova para aprender: toggle.checked, toggle.addEventListener('change', ...) e o próprio envio do formulário funcionam do mesmo jeito que em qualquer checkbox.

Estilizando com ::track e ::thumb

O switch nativo expõe dois pseudo-elementos para customização visual: ::track (a trilha) e ::thumb (a bolinha que desliza):

input[type="checkbox"][switch] {
    accent-color: #12A8C3;
}

input[type="checkbox"][switch]::track {
    background-color: #e0e0e0;
}

input[type="checkbox"][switch]:checked::track {
    background-color: #12A8C3;
}

input[type="checkbox"][switch]::thumb {
    background-color: #fff;
}

A propriedade accent-color, que já funcionava em checkboxes e radios comuns, também se aplica ao switch, dando uma forma rápida de trocar a cor sem mexer nos pseudo-elementos.

Detectando suporte antes de depender do visual

Como o atributo é ignorado silenciosamente por quem não o suporta — o elemento simplesmente volta a ser um checkbox comum — vale checar o suporte via CSS quando o design depender da aparência de switch:

@supports selector(input[type="checkbox"][switch]::thumb) {
    /* estilos específicos do switch nativo */
}

Isso evita, por exemplo, aplicar uma trilha larga e retangular pensada para o switch em cima de um checkbox quadrado tradicional nos navegadores sem suporte.

Quando usar

• Preferências on/off que têm efeito imediato, como modo escuro, notificações ou "lembrar de mim".
• Qualquer lugar onde hoje existe um checkbox estilizado à mão com CSS mais um role="switch" manual — o atributo nativo substitui as duas coisas.
• Formulários de configurações, onde o padrão visual de switch já é a expectativa do usuário.

Compatibilidade

O switch chegou no Safari 17.4 e ainda não tem suporte no Chrome nem no Firefox — nesses navegadores o atributo é ignorado e o elemento se comporta como um checkbox normal, sem quebrar nada. Como a degradação é automática, dá pra adicionar o atributo desde já e ele passa a fazer efeito conforme o suporte se espalha, mantendo um checkbox estilizado via CSS como base para quem ainda não suporta.

caniuse

Conclusão

O atributo switch pega um padrão de UI extremamente comum — e até hoje sempre reimplementado com CSS e ARIA manuais — e o transforma em uma única palavra no HTML, sem alterar nada do comportamento de formulário que já se conhece de um checkbox. Vale adicionar desde já como progressive enhancement enquanto o suporte nos navegadores cresce.