Les interrupteurs à bascule appartiennent aux bibliothèques JavaScript, car un pouce arrondi glissant sur une piste semble scripté. Il s'agit d'une case à cocher portant du CSS : l'apparence aucune efface l'illustration native de la case à cocher et les pseudo-éléments dessinent la piste et le pouce.

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

Ce que vous gardez gratuitement

  • Sémantique du formulaire : c'est toujours un élément d'entrée avec un état vérifié, des étiquettes, des radios dans les groupes, tout ce que les formulaires savent faire.
  • Comportement du clavier : bascule l'espace ; L'onglet atteint ; l'anneau visible au focus enveloppe tout le contrôle car c'est l'entrée.
  • Gestion du mouvement réduit : les deux lignes de transition se trouvent à l'intérieur de la porte partagée lorsque la feuille de style achemine l'animation.
  • Prise en charge des modes désactivé et sombre via la même palette de propriétés personnalisées dont le reste du site boit déjà.

Les détails qui différencient le bien de l'excellent

  1. Gardez un espace visible entre le pouce et le bord de la piste ; un pouce affleurant se lit comme une pilule plate et échoue aux contrôles de contraste pour basse vision.
  2. Donnez également au contrôle une identité de taille visible : certains instruments respectent toujours une cible de curseur plus grande par pointeur que par trackpad.
  3. Testez non coché, coché, désactivé et visible, puis activez le mode sombre au niveau du système d'exploitation et revérifiez.

Un commutateur qui n'expédie jamais un octet de JS est l'une de ces très belles victoires de plateforme : le HTML détient le sens, le CSS dessine la mode.