dsfr_radio_buttons
Génère un groupe de <input type="radio"> au DSFR.
Documentation DSFR - Bouton radio
Usage basique
<%= choices = [{ value: "elle", label: "Elle" }, { value: "il", label: "Il" }, { value: "iel", label: "Iel" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom" %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="elle" name="usage-basique[pronoun]" id="usage-basique_pronoun_elle" />
<label class="fr-label" for="usage-basique_pronoun_elle">Elle</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="il" name="usage-basique[pronoun]" id="usage-basique_pronoun_il" />
<label class="fr-label" for="usage-basique_pronoun_il">Il</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="iel" name="usage-basique[pronoun]" id="usage-basique_pronoun_iel" />
<label class="fr-label" for="usage-basique_pronoun_iel">Iel</label>
</div>
</div>
</fieldset>Options disponibles
| Option | Type | Description |
|---|---|---|
legend: | String | Titre du groupe |
hint: | String | Texte d'aide sous la légende |
rich: | Boolean | Active le style riche avec bordures |
Format des choix
Chaque choix est un Hash avec les clés suivantes :
| Clé | Type | Obligatoire | Description |
|---|---|---|---|
value: | String | Oui | Valeur envoyée au serveur |
label: | String | Oui | Texte affiché |
hint: | String | Non | Texte d'aide sous le label |
checked: | Boolean | Non | Pré-sélectionne l'option |
Avec texte d'aide sur la légende
<%= choices = [{ value: "elle", label: "Elle" }, { value: "il", label: "Il" }, { value: "iel", label: "Iel" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom", hint: "Choisissez votre pronom préféré" %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom<span class="fr-hint-text">Choisissez votre pronom préféré</span></legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="elle" name="hint-legend[pronoun]" id="hint-legend_pronoun_elle" />
<label class="fr-label" for="hint-legend_pronoun_elle">Elle</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="il" name="hint-legend[pronoun]" id="hint-legend_pronoun_il" />
<label class="fr-label" for="hint-legend_pronoun_il">Il</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="iel" name="hint-legend[pronoun]" id="hint-legend_pronoun_iel" />
<label class="fr-label" for="hint-legend_pronoun_iel">Iel</label>
</div>
</div>
</fieldset>Avec texte d'aide sur chaque option
<%= choices = [{ value: "elle", label: "Elle", hint: "Elle était présente" }, { value: "il", label: "Il", hint: "Il était présent" }, { value: "iel", label: "Iel", hint: "Iel était présent" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom" %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="elle" name="hint-options[pronoun]" id="hint-options_pronoun_elle" />
<label class="fr-label" for="hint-options_pronoun_elle">Elle<span class="fr-hint-text">Elle était présente</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="il" name="hint-options[pronoun]" id="hint-options_pronoun_il" />
<label class="fr-label" for="hint-options_pronoun_il">Il<span class="fr-hint-text">Il était présent</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="iel" name="hint-options[pronoun]" id="hint-options_pronoun_iel" />
<label class="fr-label" for="hint-options_pronoun_iel">Iel<span class="fr-hint-text">Iel était présent</span></label>
</div>
</div>
</fieldset>Avec option pré-sélectionnée
<%= choices = [{ value: "elle", label: "Elle" }, { value: "il", label: "Il", checked: true }, { value: "iel", label: "Iel" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom" %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="elle" name="checked[pronoun]" id="checked_pronoun_elle" />
<label class="fr-label" for="checked_pronoun_elle">Elle</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="il" checked="checked" name="checked[pronoun]" id="checked_pronoun_il" />
<label class="fr-label" for="checked_pronoun_il">Il</label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input type="radio" value="iel" name="checked[pronoun]" id="checked_pronoun_iel" />
<label class="fr-label" for="checked_pronoun_iel">Iel</label>
</div>
</div>
</fieldset>Style riche (rich)
Le style riche ajoute une bordure autour de chaque option.
<%= choices = [{ value: "elle", label: "Elle", hint: "Elle était présente" }, { value: "il", label: "Il", hint: "Il était présent" }, { value: "iel", label: "Iel", hint: "Iel était présent" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom", rich: true %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" value="elle" name="rich[pronoun]" id="rich_pronoun_elle" />
<label class="fr-label" for="rich_pronoun_elle">Elle<span class="fr-hint-text">Elle était présente</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" value="il" name="rich[pronoun]" id="rich_pronoun_il" />
<label class="fr-label" for="rich_pronoun_il">Il<span class="fr-hint-text">Il était présent</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group fr-radio-rich">
<input type="radio" value="iel" name="rich[pronoun]" id="rich_pronoun_iel" />
<label class="fr-label" for="rich_pronoun_iel">Iel<span class="fr-hint-text">Iel était présent</span></label>
</div>
</div>
</fieldset>Required
Un choix est obligatoire
<%= choices = [{ value: "elle", label: "Elle", hint: "Elle était présente" }, { value: "il", label: "Il", hint: "Il était présent" }, { value: "iel", label: "Iel", hint: "Iel était présent" }] %>
<%= f.dsfr_radio_buttons :pronoun, choices, legend: "Pronom", required: true %><fieldset class="fr-fieldset">
<legend class="fr-fieldset__legend--regular fr-fieldset__legend">Pronom</legend>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input required="required" type="radio" value="elle" name="required[pronoun]" id="required_pronoun_elle" />
<label class="fr-label" for="required_pronoun_elle">Elle<span class="fr-hint-text">Elle était présente</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input required="required" type="radio" value="il" name="required[pronoun]" id="required_pronoun_il" />
<label class="fr-label" for="required_pronoun_il">Il<span class="fr-hint-text">Il était présent</span></label>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-radio-group">
<input required="required" type="radio" value="iel" name="required[pronoun]" id="required_pronoun_iel" />
<label class="fr-label" for="required_pronoun_iel">Iel<span class="fr-hint-text">Iel était présent</span></label>
</div>
</div>
</fieldset>