Los interruptores de palanca caen en las bibliotecas de JavaScript porque un pulgar redondeado que se desliza sobre una pista parece estar escrito. Es una casilla de verificación que usa CSS: la apariencia ninguna borra el arte de la casilla de verificación nativa y los pseudoelementos dibujan la pista y el pulgar.

input[type="checkbox"].switch {
  appearance: none;
  inline-size: 3rem;
  block-size: 1.7rem;
  border-radius: 9999px;
  background: oklch(0.85 0 0);
  position: relative;
  transition: background 0.2s;
}
input[type="checkbox"].switch::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  block-size: 1.3rem;
  inline-size: 1.3rem;
  border-radius: inherit;
  background: white;
  transition: translate 0.2s;
}
input[type="checkbox"].switch:checked {
  background: var(--brand);
}
input[type="checkbox"].switch:checked::before { translate: 1.3rem 0; }

Lo que guardas gratis

  • Semántica del formulario: sigue siendo un elemento de entrada con estado marcado, etiquetas, radios en grupos, todo lo que los formularios saben hacer.
  • Comportamiento del teclado: el espacio alterna; La pestaña alcanza; el anillo visible de enfoque envuelve todo el control porque es la entrada.
  • Manejo de movimiento reducido: ambas líneas de transición se ubican dentro de la puerta compartida cuando la hoja de estilo dirige la animación.
  • Compatibilidad con modo oscuro y deshabilitado a través de la misma paleta de propiedades personalizadas de la que ya bebe el resto del sitio.

Los detalles que separan lo bueno de lo excelente

  1. Mantenga un espacio visible entre el pulgar y el borde del riel; un pulgar enrojecido se lee como una pastilla plana y no pasa las pruebas de contraste para personas con baja visión.
  2. Dale al control también una identidad de tamaño visible: algunos instrumentos aún respetan un objetivo de cursor más grande mediante el puntero que mediante el trackpad.
  3. Pruebe sin marcar, marcado, deshabilitado y con enfoque visible, luego cambie el modo oscuro a nivel del sistema operativo y vuelva a verificar.

Un switch que nunca envía un byte de JS es uno de esos triunfos gacors de la plataforma: el HTML tiene el significado, el CSS marca la moda.