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) cf. proposition de fieldset.

 

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

  • La largeur des champs indique à l’utilisateur la quantité de contenus attendu. Par exemple, les champs de saisie des codes postaux doivent avoir une largeur plus petite que les champs des e-mails.

Champs obligatoires :

Ajoutez un astérisque au titre pour informer qu’un élément est obligatoire, avec une légende en haut du formulaire. Si l’ensemble des éléments sont obligatoires, indiquez le au début du formulaire.

Validation

  • Utiliser un un bouton primaire pour valider un champs de saisie ou un formulaire, le bouton secondaire sera utiliser pour réinitialiser le formulaire ou abandonner la saisie

  • La soumission d'un champ doit être suivie d'un message indiquant la réussite ou non de l'action souhaitée

À noter, pour les autres éléments de formulaires vous pouvez consulter les composants barre de recherche , bouton radio , liste déroulante , case à cocher .

Accessibilité

Les règles d’accessibilité pour les champs sont :

  • Les champs dont la saisie est obligatoire sont signalés comme tels en l’indiquant au niveau de l'étiquette du champ de saisie et en utilisant l’attribut required.

  • Chaque champ possède une étiquette auquel il est lié grâce aux attributs id et for (ex : <input id=”champ-01”><label for=”champ-01”>).

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

  • Les instructions et indications du type de données attendues sont indiquées dans l’étiquette ou le passage de texte associé au champ préalablement à la validation du formulaire.

  • 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 :