Cómo compilar controles de interruptor accesibles

Usa el atributo HTML switch en <input type="checkbox" switch> con un <label> asociado para crear un botón de activación o desactivación binario que conserve el envío de formularios nativos, la navegación con teclado y la semántica del lector de pantalla (consulta Cómo aplicar diseño a las casillas de verificación y Formularios).

Marca

Agrega el atributo booleano switch a una entrada de casilla de verificación estándar:

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

• La etiqueta puede envolver la entrada o asociarse con for/id. Todo el diseño se aplica a la entrada, por lo que no depende de la estructura de la etiqueta.
• Cuando se marca, la entrada envía su valor de casilla de verificación estándar. En JavaScript, escucha los eventos change (o input) y lee .checked en lugar de .value.

Diseño

Personaliza el color de destaque del control con accent-color (consulta Formularios coherentes con la marca) y asegúrate de que el estilo de enfoque sea visible:

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;
}

Estrategias de resguardo

Resguardos y compatibilidad de navegadores para el control por botón

Si tu objetivo de Baseline no admite <input type="checkbox" switch>, carga input-switch-polyfill solo cuando 'switch' in HTMLInputElement.prototype sea false. No cargues el polyfill de forma incondicional. El polyfill mejora las casillas de verificación con el atributo switch configurando role="switch", aplicando el diseño de interruptor (appearance: none), sincronizando el accent-color calculado y proporcionando compatibilidad con el arrastre del puntero.

Usa el enfoque de carga de paquetes adecuado para tu proyecto. En el siguiente ejemplo, se supone que tu configuración puede resolver especificadores de módulos:

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

Resguardos y compatibilidad de navegadores con accent-color

La propiedad accent-color es una mejora progresiva. Los navegadores que no admitan esta propiedad la ignorarán y usarán los colores predeterminados de su IU.