Toggle

Candidate

Toggle active ou desactive immediatement un parametre clairement reversible. Pour une confirmation soumise avec un formulaire, utiliser Checkbox.

Variants and states

Synchronisation active Mesure sans cookies Utilise les signaux disponibles sans deposer de cookie. Option geree par votre administrateur

State	Role
Off	Parametre disponible et inactif
On	Parametre actif
Hover	Renforce le track disponible
Focus	Rend la navigation clavier visible
Disabled	Parametre visible mais non modifiable

Size

La V1 propose une taille unique, adaptee aux reglages de portail et aux formulaires marketing. Les dimensions du track et du thumb restent a confirmer dans Figma.

Astro

---
import Toggle from '../components/ui/Toggle.astro';
---

<Toggle
  label="Synchronisation active"
  name="sync-enabled"
  description="Envoie les nouvelles audiences aux destinations connectees."
  checked
/>

HTML output

<label class="pixel-toggle">
  <input type="checkbox" role="switch" name="sync-enabled" checked />
  <span class="pixel-toggle__control" aria-hidden="true">
    <span class="pixel-toggle__thumb"></span>
  </span>
  <span class="pixel-toggle__label">Synchronisation active</span>
</label>

Tokens

--toggle-track-*, --toggle-thumb, --toggle-thumb-disabled, --toggle-focus-ring, --toggle-label, --toggle-description, --toggle-width, --toggle-height, --toggle-thumb-size, --toggle-gap, --toggle-disabled-opacity, --motion-duration-base, --motion-easing-standard.

Do / Don’t

Do	Don’t
Utiliser un libelle qui reste clair dans les deux etats.	Remplacer le libelle par seulement `On` ou `Off`.
Appliquer le changement immediatement ou afficher sa progression.	Exiger ensuite un bouton Enregistrer sans l’annoncer.
Utiliser Checkbox pour un consentement explicite.	Utiliser Toggle pour accepter des conditions legales.
Garder l’action reversible.	Utiliser Toggle pour une suppression definitive.

Accessibility

Toggle utilise un checkbox natif avec role="switch". Il fonctionne avec Space, expose son etat aux technologies d’assistance et conserve un focus visible. Le libelle doit decrire le parametre, pas l’etat courant.