dsfr_select

Génère une liste déroulante <select> au DSFR.

Documentation DSFR - Liste déroulante

Usage basique

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices %>

<div class="fr-select-group">
  <label class="fr-label" for="usage-basique_role">Rôle</label>
  <select class="fr-select" name="usage-basique[role]" id="usage-basique_role"><option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Options disponibles

Signature de la méthode :
<%= f.dsfr_select(method, choices = nil, input_options = {}, **html_options) %>

input_options

OptionTypeDescription
include_blank:String/BooleanAjoute une option vide au début
selected:StringValeur pré-sélectionnée
required:BooleanAffiche une astérisque rouge

html_options

OptionTypeDescription
label:StringTexte personnalisé pour le label
hint:StringTexte d'aide affiché sous le label
disabled:BooleanDésactive le champ entier
Voir la documentation de `FormOptionsHelper#select`

Avec texte d'aide

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices, hint: "Sélectionnez votre rôle dans l'organisation" %>

<div class="fr-select-group">
  <label class="fr-label" for="hint_role">Rôle<span class="fr-hint-text">Sélectionnez votre rôle dans l'organisation</span></label>
  <select class="fr-select" name="hint[role]" id="hint_role"><option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Champ obligatoire

Note : include_blank est automatiquement activé (et ne peut pas être désactivé) lorsque required est activé
<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices, {}, required: true %>

<div class="fr-select-group">
  <label class="fr-label" for="obligatoire_role">Rôle</label>
  <select required="required" class="fr-select" name="obligatoire[role]" id="obligatoire_role"><option value="" label=" "></option>
<option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Avec option vide (include_blank)

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices, { include_blank: "Choisir..." } %>

<div class="fr-select-group">
  <label class="fr-label" for="include-blank_role">Rôle</label>
  <select class="fr-select" name="include-blank[role]" id="include-blank_role"><option value="">Choisir...</option>
<option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Avec valeur pré-sélectionnée

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices, { selected: "editor" } %>

<div class="fr-select-group">
  <label class="fr-label" for="selected_role">Rôle</label>
  <select class="fr-select" name="selected[role]" id="selected_role"><option value="admin">Administrateur</option>
<option selected="selected" value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Champ désactivé

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices, {}, disabled: true %>

<div class="fr-select-group">
  <label class="fr-label" for="disabled_role">Rôle</label>
  <select disabled="disabled" class="fr-select" name="disabled[role]" id="disabled_role"><option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
</div>

Champ en erreur

Affiche le champ avec un message d'erreur lorsque le modèle contient des erreurs de validation.

Rôle Ce champ est obligatoireRôle Le rôle sélectionné n'est pas disponible

<%= choices = [["Administrateur", "admin"], ["Éditeur", "editor"], ["Lecteur", "reader"]] %>
<%= f.dsfr_select :role, choices %>

<div class="fr-select-group fr-select-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_role">Rôle</label>
  </div>
  <div class="field_with_errors">
    <select class="fr-select" name="erreur[role]" id="erreur_role"><option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="reader">Lecteur</option></select>
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Rôle Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Rôle Le rôle sélectionné n'est pas disponible</span>
  </p>
</div>