Aller au contenu
SkillCodex
Menu

Switch

Interrupteur

Un contrôle binaire qui expose un réglage en marche ou arrêt.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : activer ou désactiver le mode sombreun réglage coulissant appliqué maintenantactiver les notifications immédiatement

Toutes les formulations
Enregistrer et partager

Reconnaître

Choix et états binaires

Essayer

S’agit-il d’une valeur indépendante, d’un choix exclusif groupé ou d’un réglage marche ou arrêt ?

Interrupteur

Contexte commun aux essais

Un parcours de réglages demande à l'utilisateur de faire un choix et de comprendre s’il est indépendant, exclusif ou exprime un réglage marche ou arrêt.

Interrupteur

Mission

Interrupteur - Switch

Bascule le réglage au pointeur et avec Espace, vérifie l’annonce de l’état et suis le mode d’enregistrement indiqué.

Applique chaque modification dès la saisie.

Aperçu : Désactivé

Résultat de l’essai

L'enregistrement automatique et l'aperçu sont désactivés.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
L’interrupteur étiqueté expose son état marche ou arrêt, et le produit rend explicite le moment de l’enregistrement.
Cas limite
Si l'enregistrement échoue, l'interrupteur revient à son état précédent et un message dans le contexte explique l'échec.

Ce que cet essai montre

Switch exprime un réglage en marche ou arrêt ; Checkbox expose un choix coché indépendant et Radio group choisit une valeur parmi plusieurs. Le moment de l’enregistrement relève du produit.

Lequel convient à ton besoin ?

Interrupteur

Activer ou désactiver un réglage de compte

Case à cocher

Sélectionner un nombre libre d'options indépendantes

Quel composant utilises-tu ici ?
Différence et sources

Switch exprime un réglage en marche ou arrêt ; Checkbox expose un choix coché indépendant et Radio group choisit une valeur parmi plusieurs. Le moment de l’enregistrement relève du produit.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Libellé

    Le texte persistant qui nomme un contrôle ou un champ.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Choix et états binaires

      Interrupteur appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Case à cocher

      Choisis Interrupteur si un réglage unique est activé ou désactivé, comme les notifications ou le thème sombre. Choisis Case à cocher si l’utilisateur sélectionne un nombre libre d’options ou approuve une affirmation, comme accepter des conditions.

      Comparer cette paire
    • Ne pas confondre

      Groupe de boutons radio

      Choisis Interrupteur si la seule question est de savoir si un réglage est activé ou désactivé. Choisis Groupe de boutons radio si l’utilisateur choisit une option parmi plusieurs alternatives nommées, comme un mode de livraison.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    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

    Choisir

    À utiliser quand

    • Activer ou désactiver un réglage de compte
    • Exposer l’état courant d’un réglage binaire

    À éviter quand

    • La valeur est un choix coché indépendant plutôt qu’un réglage marche ou arrêt
    • Le choix fait partie de trois valeurs exclusives ou plus

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Active le réglage à la souris, puis désactive-le avec Espace quand il a le focus.

      Résultat attendu

      Les deux méthodes changent le même état activé ou désactivé, et le nom du réglage reste le même.

    2. 2. À faire

      Change le réglage et suis la règle d’enregistrement annoncée, avec Enregistrer si le formulaire l’exige.

      Résultat attendu

      L’interface distingue clairement l’état choisi d’une modification enregistrée ; elle ne promet pas une sauvegarde avant sa réussite.

    3. 3. À faire

      Dans l’exemple d’essai, active l’échec d’enregistrement simulé et essaie de changer l’interrupteur.

      Résultat attendu

      L’échec est expliqué et le dernier état enregistré est rétabli ; l’interrupteur n’annonce pas une modification qui a échoué.

    Contrat complet
    1. 1Le contrôle expose un état marche ou arrêt sans ambiguïté
    2. 2Le libellé reste stable quand l'état change
    3. 3Marche et arrêt diffèrent autrement que par la couleur
    4. 4Un échec restaure l'état et est expliqué dans le contexte

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Interrupteur sans casser son comportement

    # Implémenter Interrupteur dans ton agent
    
    ## Objectif
    Implémente Interrupteur pour ce comportement vérifié : Un contrôle binaire qui expose un réglage en marche ou arrêt.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme qu’Interrupteur répond au besoin avant de coder.
    
    ## Comportement requis
    - L’activation change l’état binaire ; le moment où cette valeur est enregistrée relève d’une décision produit distincte.
    - Le contrôle conserve le même nom accessible quand son état coché, marche ou arrêt change.
    
    ## États à couvrir
    - Réglage désactivé
    - Réglage activé
    
    ## Accessibilité
    - Rôle ARIA : switch
    - Le contrôle principal ou la région nommée pour Interrupteur 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.
    - L’interrupteur est un arrêt de focus visible et son libellé active le même contrôle.
    - Sans objet : le réglage persiste jusqu’à la prochaine bascule ; un échec restaure l’état précédent.
    - Le nom accessible stable et l’état marche ou arrêt actuel sont annoncés après chaque changement.
    - Tab focalise l’interrupteur
    - Espace bascule entre marche et arrêt
    
    ## Quand ne pas utiliser
    - La valeur est un choix coché indépendant plutôt qu’un réglage marche ou arrêt
    - Le choix fait partie de trois valeurs exclusives ou plus
    
    ## Critères d’acceptation
    - Le contrôle expose un état marche ou arrêt sans ambiguïté
    - Le libellé reste stable quand l’état change
    - Marche et arrêt diffèrent autrement que par la couleur
    - Un échec restaure l’état et est expliqué dans le contexte
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • @radix-ui/react-switch
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Interrupteur sur un parcours réel

    # Vérifier Interrupteur après l’implémentation
    
    ## Objectif
    Audite l’implémentation d’Interrupteur au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:a6e6a9fc4053ccea1e51c3f9010401bbf916b62296b70d980dc75d6a7c763555

    Diagnostiquer un problème

    Trouve et corrige le défaut d’Interrupteur

    # Déboguer Interrupteur dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés d’Interrupteur.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le contrôle expose un état marche ou arrêt sans ambiguïté
    - Le libellé reste stable quand l’état change
    - Marche et arrêt diffèrent autrement que par la couleur
    - Un échec restaure l’état et est expliqué dans le contexte
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • @radix-ui/react-switch
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction d’Interrupteur

    # Empêcher la régression d’Interrupteur
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Interrupteur aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:00a766f5ee07077f8064875eca3197e6df8d246563c971b92e4ce75f64366215

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:94dadcf7d561dbd745e7ca520225877f1101e18ba79acf8d8a7afa7eefe1a786

    Dans le code

    TechnologiePrimitiveVersionLimite
    @radix-ui/react-switch

    Switch.Root

    @radix-ui/react-switch@1.3.3Radix expose les états marche et arrêt ; le produit décide quand la valeur est validée et fournit toujours un libellé visible et un retour.

    Détails techniques

    Comportements

    • Basculer un choix

      L’activation change l’état binaire ; le moment où cette valeur est enregistrée relève d’une décision produit distincte.

    • Conserver un libellé stable

      Le contrôle conserve le même nom accessible quand son état coché, marche ou arrêt change.

    É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 passe le réglage exposé sur marche ; sa persistance suit la politique produit annoncée.

    • Réglage activé → Réglage désactivé

      Le pointeur, le toucher ou Espace passe le réglage exposé sur arrêt ; sa persistance suit la politique produit annoncée.

    Scénarios de test

    Contexte
    Les réglages d’apparence incluent une préférence Réduire les animations dont le mode d’enregistrement est indiqué près du contrôle.
    Mission
    Bascule le réglage au pointeur et avec Espace, vérifie l’annonce de l’état et suis le mode d’enregistrement indiqué.
    État principal
    L’interrupteur étiqueté expose son état marche ou arrêt, et le produit rend explicite le moment de l’enregistrement.
    Cas limite
    Si l'enregistrement échoue, l'interrupteur revient à son état précédent et un message dans le contexte explique l'échec.

    Signaux visuels

    • Piste avec un curseur mobile
    • Libellé de réglage persistant
    • États marche et arrêt distincts au-delà de la couleur

    Signaux comportementaux

    • L’activation change l’état marche ou arrêt exposé
    • Espace bascule l'interrupteur focalisé
    • L'état est annoncé comme activé ou désactivé

    Accessibilité

    Rôle
    switch
    Nom accessible
    Le contrôle principal ou la région nommée pour Interrupteur 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 clavier
    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.
    Défilement
    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

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • 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
      sourceId
      source-ui-radix-switch
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Radix expose les états marche et arrêt ; le produit décide quand la valeur est validée et fournit toujours un libellé visible et un retour.

      Vérifier la source du binding

    Sources

    • WAI-ARIA APG: Switch Pattern
      sourceId
      source-ui-aria-switch
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/switch/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:573f87ee88fe4024f17bf6fb41bc90d8d0211f9e351d2cece22a560e36a43c4f
      status
      verified

      Affirmation couverte : Interrupteur : guide APG informatif pour le modèle interrupteur : rôles, états, relations et interactions au clavier.

    • Radix Primitives: Switch
      sourceId
      source-ui-radix-switch
      kind
      documentation
      canonicalUrl
      https://www.radix-ui.com/primitives/docs/components/switch
      publisher
      Radix Primitives
      sourceRevision
      http-etag:W/"1fe969f2abd70720867b2c31e5e4d503"
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:012512f04d7167ec3d9baa3400dfc80972c1870826788b0ea3c25c7fa0c916fd
      status
      verified

      Affirmation couverte : Interrupteur : parties, API d'état, interactions et limites d'implémentation documentées pour Radix Switch.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Affirmation couverte : Interrupteur : sémantique native normative, états, attributs et comportement du navigateur pour input.

    • WAI-ARIA APG: Checkbox Pattern
      sourceId
      source-ui-aria-checkbox
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:d181058b11445310619a7ce2a021f27e346ce3b2112eb32787f9157dbfee011a
      status
      verified

      Affirmation couverte : Interrupteur : guide APG informatif pour le modèle case à cocher : rôles, états, relations et interactions au clavier.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Interrupteur : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.