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.

 

Case à cocher - checkbox

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.

 

 

1 2 3 4 <div class="fr-checkbox-group"> <input type="checkbox" id="checkbox" name="checkbox"> <label class="fr-label" for="checkbox">Label checkbox</label> </div>


L'état inactif indique que utilisateur ne peux pas interagir avec l'élément.

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!-- Case à cocher désactivée--> <div class="fr-checkbox-group"> <input type="checkbox" id="checkbox-disabled-1" disabled name="checkboxes-disabled-1"> <label class="fr-label" for="checkboxes-disabled-1">Label checkbox </label> </div> <!-- Groupe de case à cocher désactivées--> <div class="fr-form-group"> <fieldset class="fr-fieldset" disabled="disabled"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-disabled-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-disabled-1" name="checkboxes-disabled-1"> <label class="fr-label" for="checkboxes-disabled-1"> Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-disabled-2" name="checkboxes-disabled-2"> <label class="fr-label" for="checkboxes-disabled-2"> Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-disabled-3" name="checkboxes-disabled-3"> <label class="fr-label" for="checkboxes-disabled-3"> Label checkbox </label> </div> </div> </fieldset> </div>

Liste verticale - checkbox block

Cette organisation verticale d’une liste de cases à cocher est les plus courante et la plus facile à lire pour l’utilisateur.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-1" name="checkboxes-1"> <label class="fr-label" for="checkboxes-1">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-2" name="checkboxes-2"> <label class="fr-label" for="checkboxes-2">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-3" name="checkboxes-3"> <label class="fr-label" for="checkboxes-3">Label checkbox </label> </div> </div> </fieldset> </div>

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.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-inline-1" name="checkboxes-inline-1"> <label class="fr-label" for="checkboxes-inline-1">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-inline-2" name="checkboxes-inline-2"> <label class="fr-label" for="checkboxes-inline-2">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-inline-3" name="checkboxes-inline-3"> <label class="fr-label" for="checkboxes-inline-3">Label checkbox </label> </div> </div> </fieldset> </div>

 

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.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-legend'> Légende pour l’ensemble de champs <span class="fr-hint-text">Texte de description additionnel</span> </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-1" name="checkboxes-hint-1"> <label class="fr-label" for="checkboxes-hint-1">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-2" name="checkboxes-hint-2"> <label class="fr-label" for="checkboxes-hint-2">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-3" name="checkboxes-hint-3"> <label class="fr-label" for="checkboxes-hint-3">Label checkbox </label> </div> </div> </fieldset> </div>

 

  • via un texte sous le libellé de chaque case à cocher, afin d’apporter une précision à chaque élément.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-hint-element-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-element-1" name="checkboxes-hint-element-1"> <label class="fr-label" for="checkboxes-hint-element-1">Label checkbox <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-element-2" name="checkboxes-hint-element-2"> <label class="fr-label" for="checkboxes-hint-element-2">Label checkbox <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-hint-element-3" name="checkboxes-hint-element-3"> <label class="fr-label" for="checkboxes-hint-element-3">Label checkbox <span class="fr-hint-text">Texte de description additionnel</span> </label> </div> </div> </fieldset> </div>

Etat 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

Sur les groupes de cases à cocher, l'état d’erreur est signalé par un ligne verticale rouge et par un message d’erreur placé sous le composant (cf. couleurs fonctionnelles : le rouge est la couleur de l’état erreur)

 


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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--error" aria-labelledby="checkboxes-error-legend checkboxes-error-desc-error" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-error-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-error-1" name="checkboxes-error-1"> <label class="fr-label" for="checkboxes-error-1">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-error-2" name="checkboxes-error-2"> <label class="fr-label" for="checkboxes-error-2">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-error-3" name="checkboxes-error-3"> <label class="fr-label" for="checkboxes-error-3">Label checkbox </label> </div> </div> <p id="checkboxes-error-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </fieldset> </div>


É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 d’erreur 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="fr-form-group"> <fieldset class="fr-fieldset fr-fieldset--inline fr-fieldset--valid" aria-labelledby="checkboxes-valid-inline-legend checkboxes-valid-inline-desc-valid" role="group"> <legend class="fr-fieldset__legend fr-text--regular" id='checkboxes-valid-inline-legend'> Légende pour l’ensemble de champs </legend> <div class="fr-fieldset__content"> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-valid-inline-1" name="checkboxes-valid-inline-1"> <label class="fr-label" for="checkboxes-valid-inline-1">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-valid-inline-2" name="checkboxes-valid-inline-2"> <label class="fr-label" for="checkboxes-valid-inline-2">Label checkbox </label> </div> <div class="fr-checkbox-group"> <input type="checkbox" id="checkboxes-valid-inline-3" name="checkboxes-valid-inline-3"> <label class="fr-label" for="checkboxes-valid-inline-3">Label checkbox </label> </div> </div> <p id="checkboxes-valid-inline-desc-valid" class="fr-valid-text"> Texte de validation </p> </fieldset> </div> 

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 est lié à l’input par la présence sur ce dernier d’un attribut aria-describedby .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!-- Erreur --> <div class="fr-checkbox-group fr-checkbox-group--error"> <input aria-describedby="checkboxes-error-desc-error" type="checkbox" id="checkbox-error" name="checkbox-error"> <label class="fr-label" for="checkbox-error"> Label checkbox </label> <p id="checkbox-error-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </div> <!-- Succès --> <div class="fr-checkbox-group fr-checkbox-group--valid"> <input aria-describedby="checkboxes-valid-desc-valid" type="checkbox" id="checkbox-valid" name="checkbox-valid"> <label class="fr-label" for="checkbox-valid"> Label checkbox </label> <p id="checkbox-valid-desc-valid" class="fr-valid-text"> Texte de validation </p> </div>

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.

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).

 

  • L’oeil lit spontanément de bas en haut, afficher les champs en liste verticale pour faciliter la lecture et optimiser l’ergonomie

À noter, pour les autres éléments de formulaires vous pouvez consulter les composants champs de saisie , liste déroulante , barre de recherche et boutons radio

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é.

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 :