Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Groupe de cases à cocher

Un groupe de cases à cocher permet aux utilisateurs de sélectionner des options dans une liste.

Conseils

Utilisez un groupe de cases à cocher lorsque plusieurs réponses peuvent s’appliquer. Par exemple, pour demander quels moyens de communication conviennent (courriel, téléphone, texto) ou pour connaître les services qui intéressent la personne.

Présentez les options clairement et utilisez un langage simple pour faciliter la comparaison. S’il y a trop d’options, envisagez un autre composant, comme une liste déroulante ou une liste à saisie semi-automatique.


Groupe de cases à cocher

Sélectionnez tous vos fruits préférés :

HTML

<!-- Groupe de cases à cocher -->
<fieldset class="gnb-checkboxes">
  <legend>Sélectionnez tous vos fruits préférés :</legend>
  <div class="pair">
    <input type="checkbox" name="bleuet" id="bleuet" checked>
    <label for="bleuet">Bleuet</label>
  </div>
  <div class="pair">
    <input type="checkbox" name="pomme" id="pomme">
    <label for="pomme">Pomme</label>
  </div>
  <div class="pair">
    <input type="checkbox" name="cerise" id="cerise">
    <label for="cerise">Cerise</label>
  </div>
  <div class="pair">
    <input type="checkbox" name="orange" id="orange">
    <label for="orange">Orange</label>
  </div>
  <div class="pair">
    <input type="checkbox" name="citron" id="citron">
    <label for="citron">Citron</label>
  </div>
</fieldset>