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-3" data-field-name="checkbox-3">
<label class="bocss-label" id="bocss-checkbox-3-label" for="bocss-checkbox-3">Composante « Checkbox »</label>
<div class="bocss-option__group">
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Valeur 1" id="checkbox-component-bocss-checkbox-3-0" name="checkbox-3[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-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<sup>1</sup>" id="checkbox-component-bocss-checkbox-3-1" name="checkbox-3[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-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-bocss-checkbox-3-2" name="checkbox-3[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-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-bocss-checkbox-3-3" name="checkbox-3[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-3-3" class="bocss-checkbox__label" tabIndex="0"
aria-selected="false">Valeur 4</label>
</div>
</div>
</div>
Paramètres
Paramètre | Valeurs | Description |
---|---|---|
html_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. |