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 questions claires et concises.

Exemple


                    [Checkbox options="Valeur 1, Valeur 2<sup>1</sup>, Valeur 3, Valeur 4" inline="true"]Composante « Checkbox »[/Checkbox]
                
<div class="bocss-checkbox__group bocss-checkbox__flex" role="group" id="bocss-checkbox-2">
    <label class="bocss-label" id="bocss-checkbox-2-label" for="bocss-checkbox-2">Composante « Checkbox »</label>
        <div class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 1" id="checkbox-component-3-0" name="checkbox-2[]" class="bocss-checkbox">
            <label for="checkbox-component-3-0" class="bocss-checkbox__label" tabIndex="0"
                   aria-selected="false">Valeur 1</label>
        </div>
        <div class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 2&lt;sup&gt;1&lt;/sup&gt;" id="checkbox-component-3-1" name="checkbox-2[]" class="bocss-checkbox">
            <label for="checkbox-component-3-1" class="bocss-checkbox__label" tabIndex="0"
                   aria-selected="false">Valeur 2<sup>1</sup></label>
        </div>
        <div class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 3" id="checkbox-component-3-2" name="checkbox-2[]" class="bocss-checkbox">
            <label for="checkbox-component-3-2" class="bocss-checkbox__label" tabIndex="0"
                   aria-selected="false">Valeur 3</label>
        </div>
        <div class="bocss-checkbox__inline">
            <input type="checkbox" value="Valeur 4" id="checkbox-component-3-3" name="checkbox-2[]" class="bocss-checkbox">
            <label for="checkbox-component-3-3" class="bocss-checkbox__label" tabIndex="0"
                   aria-selected="false">Valeur 4</label>
        </div>
    
</div>

Paramètres

Paramètre Valeurs Description
id définie par l’utilisateur ID HTML du champ
inline true, false Pour indiquer si le champ doit être aligné.
label définie par l’utilisateur Étiquette du champ. Le contenu des balises du code simplifié remplit ce champ.
name définie par l’utilisateur Nom HTML du champ
options définie par l’utilisateur Pour définir les options du menu. Utiliser des virgules pour séparer les éléments. Quand le paramètre « options » est utilisé en combinaison avec le paramètre « single_checkbox », utiliser « options » comme valeur HTML. Cette valeur apparaîtra dans la sortie des données et non dans le formulaire lui-même.
required true, false Utiliser la valeur « true » pour rendre 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.
single_checkbox true, false À utiliser pour les cases à cocher indépendantes, p. ex., les affirmations. Lorsque ce paramètre est utilisé, il faut aussi inclure un paramètre « label ». Le paramètre « options » devrait être la valeur HTML. Cette valeur apparaîtra dans la sortie des données et non dans le formulaire lui-même.