dsfr_check_box

Génère une case à cocher <input type="checkbox"> au DSFR.

Documentation DSFR - Case à cocher

Usage basique

<%= f.dsfr_check_box :terms %>

<div class="fr-fieldset__element">
  <div class="fr-checkbox-group">
    <input name="basique[terms]" type="hidden" value="0" autocomplete="off" />
    <input type="checkbox" value="1" name="basique[terms]" id="basique_terms" />
    <label class="fr-label" for="basique_terms">J'accepte les conditions</label>
  </div>
</div>

Options disponibles

OptionTypeDescription
label:StringTexte personnalisé pour le label
hint:StringTexte d'aide affiché sous le label
inline:BooleanAffichage en ligne
checked:BooleanPré-coche la case
2ème argumentStringValeur quand coché (défaut: "1")
3ème argumentStringValeur quand non coché (défaut: "0")

Avec un label personnalisé

<%= f.dsfr_check_box :terms, label: "J'accepte les conditions générales d'utilisation" %>

<div class="fr-fieldset__element">
  <div class="fr-checkbox-group">
    <input name="label-personnalise[terms]" type="hidden" value="0" autocomplete="off" />
    <input type="checkbox" value="1" name="label-personnalise[terms]" id="label-personnalise_terms" />
    <label class="fr-label" for="label-personnalise_terms">J'accepte les conditions générales d'utilisation</label>
  </div>
</div>

Avec texte d'aide

<%= f.dsfr_check_box :terms, hint: "Vous devez accepter pour continuer" %>

<div class="fr-fieldset__element">
  <div class="fr-checkbox-group">
    <input name="hint[terms]" type="hidden" value="0" autocomplete="off" />
    <input type="checkbox" value="1" name="hint[terms]" id="hint_terms" />
    <label class="fr-label" for="hint_terms">J'accepte les conditions<span class="fr-hint-text">Vous devez accepter pour continuer</span></label>
  </div>
</div>

Affichage inline

Utile pour afficher plusieurs cases à cocher sur une même ligne.

<%= f.dsfr_check_box :terms, inline: true %>
<%= f.dsfr_check_box :notifications, inline: true %>

<div class="fr-fieldset__element fr-fieldset__element--inline">
  <div class="fr-checkbox-group">
    <input name="inline[notifications]" type="hidden" value="0" autocomplete="off" />
    <input type="checkbox" value="1" name="inline[notifications]" id="inline_notifications" />
    <label class="fr-label" for="inline_notifications">Recevoir les notifications</label>
  </div>
</div>

Valeurs personnalisées

Par défaut, les valeurs sont "1" (coché) et "0" (non coché). Vous pouvez les personnaliser.

<%= f.dsfr_check_box :terms, {}, "yes", "no" %>

<div class="fr-fieldset__element">
  <div class="fr-checkbox-group">
    <input name="valeurs[terms]" type="hidden" value="no" autocomplete="off" />
    <input type="checkbox" value="yes" name="valeurs[terms]" id="valeurs_terms" />
    <label class="fr-label" for="valeurs_terms">J'accepte les conditions</label>
  </div>
</div>

Case pré-cochée

<%= f.dsfr_check_box :notifications, checked: true %>

<div class="fr-fieldset__element">
  <div class="fr-checkbox-group">
    <input name="checked[notifications]" type="hidden" value="0" autocomplete="off" />
    <input type="checkbox" value="1" checked="checked" name="checked[notifications]" id="checked_notifications" />
    <label class="fr-label" for="checked_notifications">Recevoir les notifications</label>
  </div>
</div>