Checkboxes (Case à cocher)
Les « cases à cocher » permettent à l’utilisateur de sélectionner ou désélectionner des options. Elles sont le plus souvent utilisées dans des formulaires, mais peuvent aussi servir de filtres…
Usage
- Une case à cocher est composée d’une case et d’un texte (label) associé.
- Une case à cocher, quand elle est unique, permet un choix binaire. Par exemple, accepter ou non des conditions générales.
- Elle est considérée comme « activée » lorsqu’elle est cochée (contenant un « X » ou une coche « ✓ ») et « désactivée » lorsqu’elle est vide.
- Lorsque les options peuvent être regroupées, une case à cocher parente permet de rassembler l’ensemble de ces cases à cocher. La case à cocher parente permet alors d’activer et désactiver toutes les cases à cocher enfants.
- Lorsque les enfants ne sont pas tous dans le même état, une case à cocher parente affiche un état « indéterminé » représenté par un tiret.
Bonnes pratiques
- La 1re lettre du label est en majuscule, le reste est en minuscule.
- Dans la mesure du possible, le texte du label devrait être limité à une ligne (attention sur mobile).
- Évitez de mettre un point à la fin du texte.
- Le texte doit être explicite, actif et positif.
KO
- On ne peut pas mettre un lien dans un label de case à cocher, il y aurait concurrence de clics entre ce lien et l’activation de la case sur le label.
- Lorsqu’il y a une suite de cases à cocher, les présenter dans un ordre alphabétique ou logique, par exemple : les plus susceptibles d’être sélectionnées en premier.
- Dans le cas de plus de deux cases à cocher, elles sont disposées verticalement, une case à cocher par ligne.
- Si les options s’excluent mutuellement, utilisez des radio boutons.
- Lorsque l’utilisateur doit activer/désactiver une option, un switch est recommandé.
- Suite à un clic sur une case à cocher inactive, un message explique les raisons de cet état.
Style & code
Dépendances :
- Classe
sipauisur un parent (par exemple le<body>), - composant Errors (erreurs),
- Helpers (classes d’aide).
Il y a 2 façons d’écrire une case à cocher en HTML :
- Méthode 1 :
<input>PUIS<label> - Méthode 2 :
<input>DANS<label>
Toutefois, pour gérer l’affichage en colonne d’une suite de cases à cocher, ou le placement de texte entre ces cases à cocher, la seconde méthode s'impose. Par conséquent, SipaUI ne permettra que la seconde méthode.
Cases à cocher standards
La classe su-checkbox-area est nécessaire pour encadrer la zone des cases à cocher. Dans un site utilisant SipaUI, les balises <input type="checkbox"> et <label> présentes s'affichent comme attendu, sans classe supplémentaire, si elles sont dans un parent utilisant cette classe su-checkbox-area. Toutefois, il est possible de forcer l’affichage charté avec les classes su-input-checkbox sur l’input et su-label-checkbox sur le label.
Sur une ligne, basique
<div class="su-checkbox-area">
<label for="checkbox1"><input type="checkbox" id="checkbox1" name="nom1" value="Valeur 1" checked>Valeur 1</label>
<label for="checkbox2"><input type="checkbox" id="checkbox2" name="nom1" value="Valeur 2">Valeur 2</label>
</div>
Sur une ligne, avec du texte entre les cases à cocher
<div class="su-checkbox-area">
<label for="checkbox3"><input type="checkbox" id="checkbox3" name="nom2" value="Valeur 1" checked>Valeur 1</label>
<span>ou</span>
<label for="checkbox4"><input type="checkbox" id="checkbox4" name="nom2" value="Valeur 2">Valeur 2</label>
</div>
Sur une ligne, inactif
Mettre la classe su-disabled sur su-checkbox-area ainsi que la valeur disabled et aria-readonly="true" sur l’input.
<div class="su-checkbox-area su-disabled">
<label for="checkbox5"><input type="checkbox" id="checkbox5" name="nom3" value="Valeur 1" checked disabled aria-readonly="true">Valeur 1</label>
<span>ou</span>
<label for="checkbox6"><input type="checkbox" id="checkbox6" name="nom3" value="Valeur 2" disabled aria-readonly="true">Valeur 2</label>
</div>
En colonne
Pour positionner les choix en colonnes il faut impérativement prendre la méthode 2 et ajouter la classe su-checkbox-column sur le parent.
<ul class="su-checkbox-area su-checkbox-column">
<li>
<label for="checkbox7"><input type="checkbox" id="checkbox7" name="nom4" value="Valeur 1" checked>Valeur 1</label>
</li>
<li>
<label for="checkbox8"><input type="checkbox" id="checkbox8" name="nom4" value="Valeur 2">Valeur 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</label>
</li>
</ul>
Cas forcé sans su-checkbox-area
Si vous n’avez qu’une case à cocher à utiliser et que vous n’avez donc pas besoin de faire une zone de cases à cocher avec la classe su-checkbox-area, vous pouvez forcer l’apparence prévue avec les classes su-input-checkbox et su-label-checkbox.
<label for="checkbox9" class="su-label-checkbox"><input type="checkbox" id="checkbox9" name="nom1" class="su-input-checkbox" value="Valeur 1" checked>Valeur 1</label>
Gestion des erreurs
Sur une ligne, basique
<div class="su-error">
<div class="su-checkbox-area">
<label for="checkbox10"><input type="checkbox" id="checkbox10" name="nom5" value="Valeur 1">Valeur 1</label>
<label for="checkbox11"><input type="checkbox" id="checkbox11" name="nom5" value="Valeur 2">Valeur 2</label>
</div>
<div class="su-error-message">Message d’erreur</div>
</div>
En colonne
<div class="su-error">
<ul class="su-checkbox-area su-checkbox-column su-error">
<li>
<label for="checkbox12"><input type="checkbox" id="checkbox12" name="nom6" value="Valeur 1">Valeur 1</label>
</li>
<li>
<label for="checkbox13"><input type="checkbox" id="checkbox13" name="nom6" value="Valeur 2">Valeur 2</label>
</li>
</ul>
<div class="su-error-message">Message d’erreur</div>
</div>
Cases à cocher indéterminées
Les cases à cocher indéterminées servent à montrer un état semi-sélectionné pour une case regroupant plusieurs autres cases dans un sous-niveau dont seulement certaines de ces cases sont sélectionnées. Pour fonctionner, les cases à cocher indéterminées ont besoin du javascript de SipaUI.
<ul class="su-checkbox-area su-checkbox-colum">
<li>
<label for="checkbox14"><input type="checkbox" id="checkbox14" name="nom7" value="Valeur 1" class="su-indeterminate">Valeur 1</label>
<ul class="su-checkbox-area su-checkbox-column">
<li>
<label for="checkbox14a"><input type="checkbox" id="checkbox14a" name="nom7" value="Valeur A" class="su-indeterminate">Valeur A</label>
<ul class="su-checkbox-area su-checkbox-column">
<li>
<label for="checkbox14aa"><input type="checkbox" id="checkbox14aa" name="nom7" value="Valeur a" checked>Valeur a</label>
</li>
<li>
<label for="checkbox14ab"><input type="checkbox" id="checkbox14ab" name="nom7" value="Valeur b">Valeur b</label>
</li>
</ul>
</li>
<li>
<label for="checkbox14b"><input type="checkbox" id="checkbox14b" name="nom7" value="Valeur B">Valeur B</label>
</li>
</ul>
</li>
<li>
<label for="checkbox15"><input type="checkbox" id="checkbox15" name="nom7" value="Valeur 2">Valeur 2</label>
</li>
</ul>
Accessibilité
Les cases-à-cocher sont généralement groupées et liées à un choix multiple pour une question, un sujet… Dans ce cas le design permet de faire visuellement cette association. Toutefois, pour les rendre plus accessibles aux handicapés visuels, il faut les associer aussi au niveau du DOM avec l’attribut aria-labelledby :
<p id="checkboxes_label" class="su-label">Question liée aux cases à cocher :</p>
<ul class="su-checkbox-area su-checkbox-column" aria-labelledby="checkboxes_label">
<li>
<label for="checkbox16"><input type="checkbox" id="checkbox16" name="nom8" value="Valeur 1">Valeur 1</label>
</li>
<li>
<label for="checkbox17"><input type="checkbox" id="checkbox17" name="nom8" value="Valeur 2">Valeur 2</label>
</li>
</ul>
Pour les cases-à-cocher inactives, il y a l’attribut aria-readonly="true" à positionner sur l’input (cf. « Sur une ligne, inactif » ci-dessus).
Liste des classes disponibles
su-checkbox-areasu-label-checkbox(si besoin de surcharge)su-input-checkbox(si besoin de surcharge)su-checkbox-column
Classes annexes
su-error(dépendant du composant Errors (erreurs))su-error-message(dépendant du composant Errors (erreurs))su-disabled(dépendant des Helpers (classes d’aide))