IMPORTANT : Les travaux de maintenance prévus sont en cours
Il se peut que certaines pages Web, données statistiques et autres informations manquent ou s’affichent incorrectement. Nous sommes désolés de ce contretemps.
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-5" data-field-name="checkbox-5">
<label class="bocss-label" id="bocss-checkbox-5-label" for="bocss-checkbox-5">Composante « Checkbox »</label>
<div class="bocss-option__group">
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Valeur 1" id="checkbox-component-bocss-checkbox-5-0" name="checkbox-5[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-5-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-5-1" name="checkbox-5[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-5-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-5-2" name="checkbox-5[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-5-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-5-3" name="checkbox-5[]" class="bocss-checkbox">
<label for="checkbox-component-bocss-checkbox-5-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 de l’élément. Ajouter seulement si nécessaire pour personnaliser un style ou pour que Javascript exécute une fonction précise. |
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. |