Checkbox
Case à cocher
Un choix de formulaire indépendant qui peut être coché, décoché ou parfois indéterminé avant l'envoi du formulaire.
Avec vos mots
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
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.
Case à cocher
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.
Votre mission
Basculer deux préférences avec Espace, puis utiliser la case parente pour démontrer l'état mixte.
Cas limite à vérifier
La case Tout sélectionner devient indéterminée lorsque seuls certains choix enfants sont cochés.
Mission
Case à cocher - Checkbox
Basculer deux préférences avec Espace, puis utiliser la case parente pour démontrer l'état mixte.
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.
Contrôle
L'élément interactif qui reçoit la saisie et expose son état.
À 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
- Le changement doit modifier immédiatement un réglage système
Comparer les concepts proches
Radio 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 radioSwitch 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.
InterrupteurBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Basculer un choix
L'activation change l'état coché sans déclencher immédiatement un réglage du système.
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.
Accessibilité
- Role
- native checkbox
- 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
- 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.
- 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, 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
Bindings
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
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Native checkbox semantics are retained, including form submission and the programmatic indeterminate state.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Checkbox Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Checkbox: checkbox states, labeling, and Space-key interaction guidance.
- WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Checkbox: native input types, labeling, state, validation, and form participation.
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.