Aller au contenu
SkillCodex
Menu

Checkbox

Case à cocher

Un choix binaire indépendant qui peut être coché, décoché ou parfois indéterminé.

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é : un carré que je peux cocherchoisir plusieurs préférencesaccepter cette condition

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 ?

Case à cocher

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.

Case à cocher

Mission

Case à cocher - Checkbox

Basculer deux préférences avec Espace, puis utiliser la case parente pour démontrer l'état mixte.

Préférences d'information
Aucun

Résultat de l’essai

Aucun abonnement indépendant n'est choisi.

É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
Chaque option étiquetée expose son propre état coché et peut être envoyée avec le formulaire.
Cas limite
La case Tout sélectionner devient indéterminée lorsque seuls certains choix enfants sont cochés.

Ce que cet essai montre

Checkbox représente un choix coché indépendant ; Radio group impose un seul choix, tandis que Switch exprime un état marche ou arrêt. Le moment de l’enregistrement relève du produit, pas de la distinction sémantique.

Lequel convient à ton besoin ?

Case à cocher

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

Groupe de boutons radio

Choisir un mode de livraison parmi des alternatives visibles

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

Checkbox représente un choix coché indépendant ; Radio group impose un seul choix, tandis que Switch exprime un état marche ou arrêt. Le moment de l’enregistrement relève du produit, pas de la distinction sémantique.

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.

    Contrôle

    L'élément interactif qui reçoit la saisie et expose son état.

    Position dans l’atlas

    Carte relationnelle

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

    • Chapitre

      Choix et états binaires

      Case à cocher appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Groupe de boutons radio

      Choisis Case à cocher si l’utilisateur peut cocher zéro, une ou plusieurs options. Choisis Groupe de boutons radio si exactement une option doit être retenue parmi des alternatives visibles.

      Comparer cette paire
    • Ne pas confondre

      Interrupteur

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

      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 : case, case de sélection, choix multiple

    • un carré que je peux cocher
    • choisir plusieurs préférences
    • accepter cette condition
    • sélectionner des éléments indépendamment
    • une case avec une coche
    • montrer que seuls certains sous-éléments sont choisis

    Choisir

    À utiliser quand

    • Sélectionner un nombre libre d'options indépendantes
    • Confirmer une condition dans un formulaire

    À éviter quand

    • Une seule option doit être sélectionnée
    • La valeur s’exprime mieux comme un réglage marche ou arrêt

    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

      Clique sur le texte d’une case à cocher, puis place le focus sur cette case et appuie sur Espace.

      Résultat attendu

      Les deux actions changent la même case, et son état coché se reconnaît autrement que par la couleur.

    2. 2. À faire

      Coche deux options indépendantes, puis décoche seulement la première.

      Résultat attendu

      La deuxième option reste cochée ; des choix indépendants ne se comportent pas comme un groupe de boutons radio.

    3. 3. À faire

      Si Tout sélectionner est proposé, coche seulement une partie des éléments, puis active Tout sélectionner.

      Résultat attendu

      La case parente indique d’abord un état partiel, puis coche tous les éléments ; l’état partiel n’est pas envoyé comme une troisième valeur.

    Contrat complet
    1. 1Chaque case possède un libellé visible associé
    2. 2Les options indépendantes se basculent séparément
    3. 3L'état mixte est programmatique et visuel
    4. 4Espace et pointeur produisent le même état

    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 Case à cocher sans casser son comportement

    # Implémenter Case à cocher dans ton agent
    
    ## Objectif
    Implémente Case à cocher pour ce comportement vérifié : Un choix binaire indépendant qui peut être coché, décoché ou parfois indéterminé.
    
    ## 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 que Case à cocher 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.
    - Un choix parent peut exposer un état indéterminé lorsque seuls certains éléments enfants sont sélectionnés.
    
    ## États à couvrir
    - Case décochée
    - Case cochée
    
    ## Accessibilité
    - Rôle ARIA : input[type=checkbox]
    - Le contrôle principal ou la région nommée pour Case à cocher 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.
    - Chaque case native possède un focus visible et son libellé agrandit la cible au pointeur.
    - Sans objet : la case persiste jusqu’à ce que l’utilisateur la bascule ou réinitialise le formulaire.
    - Le nom accessible, l’état coché ou mixte, l’état obligatoire et l’erreur sont exposés.
    - Tab focalise chaque case
    - Espace bascule la case focalisée
    
    ## Quand ne pas utiliser
    - Une seule option doit être sélectionnée
    - La valeur s’exprime mieux comme un réglage marche ou arrêt
    
    ## Critères d’acceptation
    - Chaque case possède un libellé visible associé
    - Les options indépendantes se basculent séparément
    - L’état mixte est programmatique et visuel
    - Espace et pointeur produisent le même état
    
    ## 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.
    
    • Web platform
    • 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 Case à cocher sur un parcours réel

    # Vérifier Case à cocher après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Case à cocher 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:b16cd2afc76aa8ee626a9eeed9bf6160cb5c39885ef86b5d51eb246ca93b9633

    Diagnostiquer un problème

    Trouve et corrige le défaut de Case à cocher

    # Déboguer Case à cocher 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 de Case à cocher.
    - 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
    - Chaque case possède un libellé visible associé
    - Les options indépendantes se basculent séparément
    - L’état mixte est programmatique et visuel
    - Espace et pointeur produisent le même état
    
    ## 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.
    
    • Web platform
    • 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 de Case à cocher

    # Empêcher la régression de Case à cocher
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Case à cocher 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:04a664cd08060b399d2936071faf4a1505f8ed2e7b4fe2f72386812b55a7f70e

    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:03974a7bcbd31163a6eacb369cce237ec4cf9c0a8ba90d720d25457e990fd586

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    input[type=checkbox]

    NatifLa sémantique native de la case à cocher est conservée, y compris l’envoi du formulaire et l’état indéterminé programmatique.

    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.

    • Représenter un état mixte

      Un choix parent peut exposer un état indéterminé lorsque seuls certains éléments enfants sont sélectionnés.

    États

    • Case décochée

      Case décochée

    • Case cochée

      Case cochée

    Transitions d’état

    • Case décochée → Case cochée

      Le pointeur, le toucher ou Espace active le choix indépendant décoché.

    • Case cochée → Case décochée

      Le pointeur, le toucher ou Espace active de nouveau le choix indépendant coché.

    Scénarios de test

    Contexte
    Un formulaire de notifications permet de choisir indépendamment e-mails, résumé hebdomadaire et conseils produit.
    Mission
    Basculer deux préférences avec Espace, puis utiliser la case parente pour démontrer l'état mixte.
    État principal
    Chaque option étiquetée expose son propre état coché et peut être envoyée avec le formulaire.
    Cas limite
    La case Tout sélectionner devient indéterminée lorsque seuls certains choix enfants sont cochés.

    Signaux visuels

    • Contrôle carré près d'un libellé persistant
    • Coche pour l'état sélectionné
    • Tiret possible pour l'état mixte

    Signaux comportementaux

    • Chaque case change indépendamment
    • Espace bascule la case focalisée
    • Sa valeur rejoint généralement l'envoi du formulaire

    Accessibilité

    Rôle
    input[type=checkbox]
    Nom accessible
    Le contrôle principal ou la région nommée pour Case à cocher 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
    Chaque case native possède un focus visible et son libellé agrandit la cible au pointeur.
    Fermeture
    Sans objet : la case persiste jusqu'à ce que l'utilisateur la bascule ou réinitialise le formulaire.
    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, l'état coché ou mixte, l'état obligatoire et l'erreur sont exposés.
    Clavier
    • Tab focalise chaque case
    • Espace bascule la case focalisée

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • input[type=checkbox]

      implementationKind
      native
      nativeElement
      input[type=checkbox]
      ariaPattern
      checkbox
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      verified
      sourceId
      source-ui-html-input
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : La sémantique native de la case à cocher est conservée, y compris l’envoi du formulaire et l’état indéterminé programmatique.

      Vérifier la source du binding

    Sources

    • 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 : Case à cocher : guide APG informatif pour le modèle case à cocher : rôles, états, relations et interactions au clavier.

    • 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 : Case à cocher : sémantique native normative, états, attributs et comportement du navigateur pour input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Affirmation couverte : Case à cocher : sémantique native normative, états, attributs et comportement du navigateur pour HTML form controls.

    • 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 : Case à cocher : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Case à cocher : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.