Case à cocher - Checkbox
Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options dans une liste. Elles sont utilisées pour effectuer des sélections multiples (de 0 à N éléments) ou bien pour permettre un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.
La case à cocher peut être utilisée seule ou en liste. Évitez les listes de plus de 5 items et lorsque vous souhaitez contraindre le choix à un seul élément - utiliser les boutons radios.
Structure
Les cases à cocher sont composés des éléments suivants :
- un bouton - obligatoire.
- un label, associé au bouton - obligatoire.
- un texte additionnel pour le boutons / labels - optionnel.
- une légende, décrivant le contexte du groupe de bouton - obligatoire pour les groupes de cases.
- une description additionnelle pour la légende - optionnelle.
- un message d’erreur ou de succès - obligatoire si un changement d'état doit être notifié à l’utilisateur.
Liste verticale
Cette organisation verticale d’une liste de cases à cocher est les plus courante et la plus facile à lire pour l’utilisateur.
<fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend checkboxes-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-1" id="checkboxes-1" type="checkbox" aria-describedby="checkboxes-1-messages">
<label class="fr-label" for="checkboxes-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input checked name="checkboxes-2" id="checkboxes-2" type="checkbox" aria-describedby="checkboxes-2-messages">
<label class="fr-label" for="checkboxes-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-3" id="checkboxes-3" type="checkbox" aria-describedby="checkboxes-3-messages">
<label class="fr-label" for="checkboxes-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-messages" aria-live="assertive">
</div>
</fieldset>
Liste horizontale - Inline checkbox
Cette organisation doit être uniquement utilisée lorsque il y a 2 options ou que les libellés des entrées sont très courtes. Pour les autres cas, il faut privilégier les listes verticales, plus faciles à lire pour l’utilisateur.
<fieldset class="fr-fieldset" id="checkboxes-inline" aria-labelledby="checkboxes-inline-legend checkboxes-inline-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-inline-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-inline-1" id="checkboxes-inline-1" type="checkbox" aria-describedby="checkboxes-inline-1-messages">
<label class="fr-label" for="checkboxes-inline-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-inline-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-inline-2" id="checkboxes-inline-2" type="checkbox" aria-describedby="checkboxes-inline-2-messages">
<label class="fr-label" for="checkboxes-inline-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-inline-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-inline-3" id="checkboxes-inline-3" type="checkbox" aria-describedby="checkboxes-inline-3-messages">
<label class="fr-label" for="checkboxes-inline-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-inline-messages" aria-live="assertive">
</div>
</fieldset>
Liste avec texte d’aide
Il est recommandé d’ajouter un texte d’aide afin de faciliter le choix de l’utilisateur. Ces précisions peuvent être apportés de 2 façons :
- via un texte sous le titre du groupe des cases à cocher, afin d’apporter une précision à l’intitulé du groupe.
- via un texte sous le libellé de chaque case à cocher, afin d’apporter une précision à chaque élément.
<fieldset class="fr-fieldset" id="checkboxes-hint-el-sm" aria-labelledby="checkboxes-hint-el-sm-legend checkboxes-hint-el-sm-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-hint-el-sm-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-1" id="checkboxes-hint-el-sm-1" type="checkbox" aria-describedby="checkboxes-hint-el-sm-1-messages">
<label class="fr-label" for="checkboxes-hint-el-sm-1">
Libellé case à cocher
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-2" id="checkboxes-hint-el-sm-2" type="checkbox" aria-describedby="checkboxes-hint-el-sm-2-messages">
<label class="fr-label" for="checkboxes-hint-el-sm-2">
Libellé case à cocher
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-hint-el-sm-3" id="checkboxes-hint-el-sm-3" type="checkbox" aria-describedby="checkboxes-hint-el-sm-3-messages">
<label class="fr-label" for="checkboxes-hint-el-sm-3">
Libellé case à cocher
<span class="fr-hint-text">Texte de description additionnel</span>
</label>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-hint-el-sm-messages" aria-live="assertive">
</div>
</fieldset>
À noter l'état “Indeterminate” n’est pas géré actuellement par le Système de Design de l'Etat.
État d’erreur
L'état d’erreur est signalé par un changement de couleur ou l’affichage d’une ligne (cf. couleurs fonctionnelles : le rouge est la couleur de l’état erreur) et par l’affichage un message d’erreur apparait en-dessous du composant.
Pour les développeurs
Pour l'état d’erreur des groupes de cases à cocher, il est nécessaire d’ajouter un role="group" à la balise fieldset. De plus, le message d’erreur et la balise legend sont liés au fieldset via l’attribut aria-labelledby.
<fieldset class="fr-fieldset fr-fieldset--error" id="checkboxes-error" role="group" aria-labelledby="checkboxes-error-legend checkboxes-error-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-error-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-error-1" id="checkboxes-error-1" type="checkbox" aria-describedby="checkboxes-error-1-messages">
<label class="fr-label" for="checkboxes-error-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-error-2" id="checkboxes-error-2" type="checkbox" aria-describedby="checkboxes-error-2-messages">
<label class="fr-label" for="checkboxes-error-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-error-3" id="checkboxes-error-3" type="checkbox" aria-describedby="checkboxes-error-3-messages">
<label class="fr-label" for="checkboxes-error-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-error-messages" aria-live="assertive">
<p class="fr-message fr-message--error" id="checkboxes-error-message-error">Texte d’erreur obligatoire</p>
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--error" id="checkboxes-error-inline" role="group" aria-labelledby="checkboxes-error-inline-legend checkboxes-error-inline-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-error-inline-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-1" id="checkboxes-error-inline-1" type="checkbox" aria-describedby="checkboxes-error-inline-1-messages">
<label class="fr-label" for="checkboxes-error-inline-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-2" id="checkboxes-error-inline-2" type="checkbox" aria-describedby="checkboxes-error-inline-2-messages">
<label class="fr-label" for="checkboxes-error-inline-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-error-inline-3" id="checkboxes-error-inline-3" type="checkbox" aria-describedby="checkboxes-error-inline-3-messages">
<label class="fr-label" for="checkboxes-error-inline-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-error-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-error-inline-messages" aria-live="assertive">
<p class="fr-message fr-message--error" id="checkboxes-error-inline-message-error">Texte d’erreur obligatoire</p>
</div>
</fieldset>
État de succès
L'état de succès est signalé par l’affichage d’une ligne verte et d'un message de succès en-dessous du composant (cf. couleurs fonctionnelles : le vert est la couleur de l’état succès).
Pour les développeurs
Pour l'état de succès des groupes de cases à cocher, il est nécessaire d’ajouter un role=”group” à la balise fieldset. De plus, le message de validation et la balise legend sont liés au fieldset via l’attribut aria-labelledby. Pour la case à cocher seule, voir le snippet plus bas.
<fieldset class="fr-fieldset fr-fieldset--valid" id="checkboxes-valid" role="group" aria-labelledby="checkboxes-valid-legend checkboxes-valid-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-valid-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-1" id="checkboxes-valid-1" type="checkbox" aria-describedby="checkboxes-valid-1-messages">
<label class="fr-label" for="checkboxes-valid-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-2" id="checkboxes-valid-2" type="checkbox" aria-describedby="checkboxes-valid-2-messages">
<label class="fr-label" for="checkboxes-valid-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-3" id="checkboxes-valid-3" type="checkbox" aria-describedby="checkboxes-valid-3-messages">
<label class="fr-label" for="checkboxes-valid-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-valid-messages" aria-live="assertive">
<p class="fr-message fr-message--valid" id="checkboxes-valid-message-valid">Texte de validation</p>
</div>
</fieldset>
<fieldset class="fr-fieldset fr-fieldset--valid" id="checkboxes-valid-inline" role="group" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-valid-inline-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-1" id="checkboxes-valid-inline-1" type="checkbox" aria-describedby="checkboxes-valid-inline-1-messages">
<label class="fr-label" for="checkboxes-valid-inline-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-2" id="checkboxes-valid-inline-2" type="checkbox" aria-describedby="checkboxes-valid-inline-2-messages">
<label class="fr-label" for="checkboxes-valid-inline-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element fr-fieldset__element--inline">
<div class="fr-checkbox-group">
<input name="checkboxes-valid-inline-3" id="checkboxes-valid-inline-3" type="checkbox" aria-describedby="checkboxes-valid-inline-3-messages">
<label class="fr-label" for="checkboxes-valid-inline-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-valid-inline-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-valid-inline-messages" aria-live="assertive">
<p class="fr-message fr-message--valid" id="checkboxes-valid-inline-message-valid">Texte de validation</p>
</div>
</fieldset>
Pour le composant seul
Sur une case à cocher simple (choix binaire), l'état d’erreur est signalé par le changement de couleur de la bordure - qui devient rouge - , et par l’affichage un message d’erreur apparait en-dessous du composant (cf. couleurs fonctionnelles : le rouge est la couleur de l’état erreur).
Pour les développeurs
Le message d’erreur ou de succès, sur case à cocher seule, est lié à l’input par la présence sur ce dernier d’un attribut aria-describedby .
<div class="fr-checkbox-group fr-checkbox-group--valid">
<input aria-describedby="checkbox-valid-messages" id="checkbox-valid" type="checkbox">
<label class="fr-label" for="checkbox-valid">
Label checkbox
</label>
<div class="fr-messages-group" id="checkbox-valid-messages" aria-live="assertive">
<p class="fr-message fr-message--valid" id="checkbox-valid-message-valid">Texte de validation</p>
</div>
</div>
<div class="fr-checkbox-group fr-checkbox-group--error">
<input aria-describedby="checkbox-error-messages" id="checkbox-error" type="checkbox">
<label class="fr-label" for="checkbox-error">
Label checkbox
</label>
<div class="fr-messages-group" id="checkbox-error-messages" aria-live="assertive">
<p class="fr-message fr-message--error" id="checkbox-error-message-error">Texte d’erreur obligatoire</p>
</div>
</div>
État désactivé
L'état désactivé indique que utilisateur ne peux pas interagir avec l'élément.
<fieldset class="fr-fieldset" id="checkboxes-disabled" aria-labelledby="checkboxes-disabled-legend checkboxes-disabled-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-disabled-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input disabled name="checkboxes-disabled-1" id="checkboxes-disabled-1" type="checkbox" aria-describedby="checkboxes-disabled-1-messages">
<label class="fr-label" for="checkboxes-disabled-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-disabled-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input checked disabled name="checkboxes-disabled-2" id="checkboxes-disabled-2" type="checkbox" aria-describedby="checkboxes-disabled-2-messages">
<label class="fr-label" for="checkboxes-disabled-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-disabled-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input disabled name="checkboxes-disabled-3" id="checkboxes-disabled-3" type="checkbox" aria-describedby="checkboxes-disabled-3-messages">
<label class="fr-label" for="checkboxes-disabled-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-disabled-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-disabled-messages" aria-live="assertive">
</div>
</fieldset>
Tailles
La taille par défaut est de 24px (taille Medium - MD) , ce qui permet optimiser l’ergonomie et l’accessibilité en ayant un zone cliquable confortable.
<fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend checkboxes-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-1" id="checkboxes-1" type="checkbox" aria-describedby="checkboxes-1-messages">
<label class="fr-label" for="checkboxes-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input checked name="checkboxes-2" id="checkboxes-2" type="checkbox" aria-describedby="checkboxes-2-messages">
<label class="fr-label" for="checkboxes-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group">
<input name="checkboxes-3" id="checkboxes-3" type="checkbox" aria-describedby="checkboxes-3-messages">
<label class="fr-label" for="checkboxes-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-messages" aria-live="assertive">
</div>
</fieldset>
Une taille ‘small’ (SM) de 16 px est également disponible. Il s’agit de la taille standard proposé par les navigateurs. Attention toutefois à laisser une zone de clic suffisante (notamment pour le tactile ou une zone de 44 px de hauteur est fortement conseillée).
<fieldset class="fr-fieldset" id="checkboxes-small" aria-labelledby="checkboxes-small-legend checkboxes-small-messages">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-small-legend">
Légende pour l’ensemble des éléments
</legend>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-small-1" id="checkboxes-small-1" type="checkbox" aria-describedby="checkboxes-small-1-messages">
<label class="fr-label" for="checkboxes-small-1">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-small-1-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input checked name="checkboxes-small-2" id="checkboxes-small-2" type="checkbox" aria-describedby="checkboxes-small-2-messages">
<label class="fr-label" for="checkboxes-small-2">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-small-2-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="checkboxes-small-3" id="checkboxes-small-3" type="checkbox" aria-describedby="checkboxes-small-3-messages">
<label class="fr-label" for="checkboxes-small-3">
Libellé case à cocher
</label>
<div class="fr-messages-group" id="checkboxes-small-3-messages" aria-live="assertive">
</div>
</div>
</div>
<div class="fr-messages-group" id="checkboxes-small-messages" aria-live="assertive">
</div>
</fieldset>
Accessibilité
Les règles d’accessibilité pour les champs sont :
- Chaque champ possède un label auquel il est lié grâce aux attributs id et for (ex : <input id=”champ-01”><label for=”champ-01”>).
- Les champs dont la saisie est obligatoire sont signalés comme tels au niveau du label et en utilisant l’attribut required.
- Les groupes de cases à cocher doivent être regroupés dans une balise fieldset. Une balise legend doit alors être présente car elle constitue l’en-tête du groupe de cases à cocher.
- Les champs de formulaire répétés et ayant la même fonction dans la page ou dans un ensemble de pages ont des libellés cohérents.
- Les champs de même nature sont regroupés à l’aide d’une balise <fieldset> dont le rôle est décrit dans une balise <legend>.
- Pour chaque erreur de saisie, le type ou le format de donnée attendu est suggéré.
- L’oeil lit spontanément de bas en haut, afficher les champs en liste verticale pour faciliter la lecture et optimiser l’ergonomie
Personnalisation
Le style de ce composant n’est pas personnalisable. Toutefois, certains éléments sont optionnels et les icônes peuvent être changées - voir la structure du composant.
Besoin d'aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
- la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant ! - le centre de support pour envoyer vos demandes de correctifs et d'évolution.