Case à cocher

Choix multiples ou consentement explicite, avec libellé et texte d’aide optionnel.

Exemple

Pièces fournies 
<fieldset class="bj-checkbox-group">
  <legend class="bj-checkbox-group__legend">Pièces fournies</legend>
  <label class="bj-checkbox">
    <input type="checkbox" name="docs" value="id" />
    <span class="bj-checkbox__label">Pièce d’identité</span>
  </label>
  <label class="bj-checkbox">
    <input type="checkbox" name="docs" value="dom" checked />
    <span class="bj-checkbox__label">Justificatif</span>
    <span class="bj-checkbox__hint">PDF ou image, 5 Mo max.</span>
  </label>
</fieldset>

Attributs <code>name</code>, <code>value</code> et état coché

Utilisez name pour regrouper les envois ; value identifie la case dans le groupe. L’état visuel coché est l’attribut HTML checked.

<!-- Case seule avec nom / valeur -->
<label class="bj-checkbox">
  <input type="checkbox" name="accept_cgu" value="1" checked />
  <span class="bj-checkbox__label">J’accepte les conditions</span>
</label>

Variantes

bj-checkbox__hint pour préciser contraintes ou formats.

Classes CSS

ClasseDescription
bj-checkbox-groupConteneur.
bj-checkbox-group__legendTitre de groupe.
bj-checkboxLabel englobant.
bj-checkbox__labelTexte.
bj-checkbox__hintAide.
(input checkbox)Case : <code>type="checkbox"</code>, <code>name</code>, <code>value</code>, <code>checked</code>, <code>disabled</code>.

Accessibilité

Pour plusieurs cases liées, préférez fieldset et legend.