Criar controles de interruptor acessíveis

Use o atributo HTML switch em <input type="checkbox" switch> com um <label> associado para criar um botão de alternância binário que preserva o envio de formulários nativos, a navegação pelo teclado e a semântica do leitor de tela (consulte Estilização de caixas de seleção e Formulários).

Marcação

Adicione o atributo booleano switch a uma entrada de caixa de seleção padrão:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• O rótulo pode envolver a entrada ou ser associado a for/id. Toda a estilização é voltada para a entrada, então não depende da estrutura do rótulo.
• Quando marcada, a entrada envia o valor padrão da caixa de seleção. No JavaScript, detecte eventos change (ou input) e leia .checked em vez de .value.

Estilo

Personalize a cor de destaque do controle usando accent-color (consulte Formulários consistentes com a marca) e garanta um estilo de foco visível:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

Estratégias de fallback

Alternativas e suporte do navegador para switch-control

Se o destino do Baseline não for compatível com <input type="checkbox" switch>, carregue input-switch-polyfill somente quando 'switch' in HTMLInputElement.prototype for false. Não carregue o polyfill incondicionalmente. O polyfill aprimora as caixas de seleção com o atributo switch definindo role="switch", aplicando o estilo de interruptor (appearance: none), sincronizando o accent-color calculado e oferecendo suporte para arrastar o ponteiro.

Use a abordagem de carregamento de pacotes adequada ao seu projeto. O exemplo abaixo pressupõe que sua configuração pode resolver especificadores de módulo:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

Alternativas e suporte do navegador para accent-color

A propriedade accent-color é um aprimoramento progressivo. Os navegadores que não são compatíveis com essa propriedade vão ignorá-la e usar as cores padrão da interface.