Case à cocher

Les cases à cocher (code « Checkbox ») servent à choisir une ou plusieurs options dans une liste. Voir l’aide-mémoire pour les paramètres.

Pratiques exemplaires

  • À utiliser dans les formulaires seulement.
  • Rédiger des étiquettes claires.
  • Choisir entre deux types :
    • Cases à cocher : pour permettre de choisir plus d’une option. La case à cocher unique peut servir à confirmer ou accepter un énoncé.
    • Bouton radio : à utiliser lorsqu’il faut choisir une seule réponse parmi plusieurs.

Exemple


 


<div class="bocss-checkbox__group bocss-checkbox__flex" role="group" id="bocss-checkbox-1">
    <label class="bocss-label" id="bocss-checkbox-1-label" for="bocss-checkbox-1">Composante Checkbox</label>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 1" id="checkbox-component2-0" name="checkbox-1[]"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-0" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Valeur 1</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 2" id="checkbox-component2-1" name="checkbox-1[]"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-1" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Valeur 2</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 3" id="checkbox-component2-2" name="checkbox-1[]"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-2" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Valeur 3</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 4" id="checkbox-component2-3" name="checkbox-1[]"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-3" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Valeur 4</label> <br />
        </span>
    
</div>

Code simplifié


                [Checkbox options="Valeur 1, Valeur 2, Valeur 3, Valeur 4" class="checkboxClass" label="Composante Checkbox" inline="true"]

Paramètres

Paramètre Valeurs Description
options définie par l’utilisateur Pour définir les options du menu. Utiliser des virgules pour séparer les éléments du menu.
name définie par l’utilisateur Nom du champ
class définie par l’utilisateur Classe du champ
label définie par l’utilisateur Texte du champs
id définie par l’utilisateur ID du champ
inline true, false Pour indiquer si le champ doit être aligné
type radio, checkbox Type de champ : case à cocher (checkbox) ou bouton radio (radio)
required true, false La valeur « true » rend le champ obligatoire.
separator définie par l’utilisateur Si des virgules font partie du contenu, utiliser un caractère spécial pour séparer les éléments du menu.