Switch
Interrupteur
Un contrôle marche ou arrêt pour un réglage dont le changement prend effet immédiatement.
Avec vos mots
Ce que les gens décrivent
Alias documentés : bascule, bouton marche-arrêt, réglage binaire
- activer ou désactiver le mode sombre
- un réglage coulissant appliqué maintenant
- activer les notifications immédiatement
- un contrôle marche arrêt dans les réglages
- basculer cette fonction sans enregistrer
- une bascule qui change l'état tout de suite
Essayer
Choix et états binaires
Comparer les trois comportements
Scénario comparatif partagé : Un parcours de réglages demande à l'utilisateur de faire un choix et de comprendre s'il est indépendant, exclusif ou appliqué immédiatement.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Interrupteur
Switch applique un réglage immédiatement ; Checkbox enregistre généralement un choix pour un envoi ultérieur, et Radio group choisit une valeur parmi plusieurs.
Votre mission
Basculer le réglage au pointeur et avec Espace, puis observer l'aperçu changer sans enregistrer.
Cas limite à vérifier
Si l'enregistrement échoue, l'interrupteur revient à son état précédent et un message dans le contexte explique l'échec.
Mission
Interrupteur - Switch
Basculer le réglage au pointeur et avec Espace, puis observer l'aperçu changer sans enregistrer.
Applique chaque modification dès la saisie.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Libellé
Le texte persistant qui nomme un contrôle ou un champ.
À utiliser quand
- Activer ou désactiver un réglage de compte
- Activer une fonction avec un retour immédiat
À éviter quand
- La valeur est envoyée avec le reste d'un formulaire
- Le choix fait partie de trois valeurs exclusives ou plus
Comparer les concepts proches
Checkbox représente un choix indépendant qui peut attendre l'envoi ; Radio group impose un seul choix, tandis que Switch applique immédiatement un réglage marche ou arrêt.
Case à cocherRadio group permet exactement un choix ; les Checkbox sont indépendantes, tandis que Switch change un réglage immédiat marche ou arrêt.
Groupe de boutons radioBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Appliquer immédiatement
Le passage de marche à arrêt prend effet immédiatement, sans attendre l'envoi d'un formulaire.
Basculer à l'activation
Activer le déclencheur ouvre la surface, puis peut la refermer au second appui.
États
Réglage désactivé
Réglage désactivé
Réglage activé
Réglage activé
Transitions d’état
Réglage désactivé → Réglage activé
Le pointeur, le toucher ou Espace active le réglage et l’applique immédiatement.
Réglage activé → Réglage désactivé
Le pointeur, le toucher ou Espace désactive le réglage et l’applique immédiatement.
Scénarios de test
- Contexte
- Les réglages d'apparence incluent une préférence Réduire les animations appliquée immédiatement.
- Mission
- Basculer le réglage au pointeur et avec Espace, puis observer l'aperçu changer sans enregistrer.
- État principal
- L'interrupteur étiqueté expose son état marche ou arrêt et met l'aperçu à jour immédiatement.
- Cas limite
- Si l'enregistrement échoue, l'interrupteur revient à son état précédent et un message dans le contexte explique l'échec.
Accessibilité
- Role
- switch
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- L'interrupteur est un arrêt de focus visible et son libellé active le même contrôle.
- Fermeture
- Sans objet : le réglage persiste jusqu'à la prochaine bascule ; un échec restaure l'état précédent.
- Scroll
- Le défilement de la page ne modifie pas la valeur. Le contrôle actif et tout message associé restent visibles au-dessus des régions fixes de l'interface.
- Annonce
- Le nom accessible stable et l'état marche ou arrêt actuel sont annoncés après chaque changement.
- Clavier
- Tab focalise l'interrupteur
- Espace bascule entre marche et arrêt
Bindings
Switch.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- switch
- radixPrimitive
- Switch
- shadcnRecipe
- Switch
- runtimeDependency
- @radix-ui/react-switch@1.3.3
- packageName
- @radix-ui/react-switch
- exportName
- Switch.Root
- exactVersion
- 1.3.3
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix Switch exposes on and off state, but the setting must take effect immediately and still needs a visible label.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Switch Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Switch: switch role, stable label, binary state, and keyboard interaction guidance.
- Radix Primitives: Switch
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Switch: documented Radix Switch parts, checked state, labeling integration, and keyboard behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.