dsfr_text_field

Génère un champ de saisie <input type="text"> au DSFR.

Documentation DSFR - Champ de saisie

Usage basique

<%= f.dsfr_text_field :name %>

<div class="fr-input-group">
  <label class="fr-label" for="usage-basique_name">Nom complet</label>
  <input class="fr-input" type="text" name="usage-basique[name]" id="usage-basique_name" />
</div>

Options disponibles

OptionTypeDescription
label:StringTexte personnalisé pour le label
hint:StringTexte d'aide affiché sous le label
required:BooleanAffiche une astérisque si true
placeholder:StringTexte indicatif dans le champ
disabled:BooleanDésactive le champ
data:HashAttributs data-* pour le champ
class:StringClasses CSS additionnelles pour le groupe

Avec un label personnalisé

<%= f.dsfr_text_field :name, label: "Votre nom complet" %>

<div class="fr-input-group">
  <label class="fr-label" for="label-personnalise_name">Votre nom complet</label>
  <input class="fr-input" type="text" name="label-personnalise[name]" id="label-personnalise_name" />
</div>

Avec un texte d'aide (hint)

<%= f.dsfr_text_field :name, hint: "Entrez votre prénom et nom de famille" %>

<div class="fr-input-group">
  <label class="fr-label" for="hint_name">Nom complet<span class="fr-hint-text">Entrez votre prénom et nom de famille</span></label>
  <input class="fr-input" type="text" name="hint[name]" id="hint_name" />
</div>

Champ obligatoire

Affiche une astérisque à côté du label.

<%= f.dsfr_text_field :name, required: true %>

<div class="fr-input-group">
  <label class="fr-label" for="obligatoire_name">Nom complet</label>
  <input class="fr-input" required="required" type="text" name="obligatoire[name]" id="obligatoire_name" />
</div>

Avec un placeholder

<%= f.dsfr_text_field :name, placeholder: "Jean Dupont" %>

<div class="fr-input-group">
  <label class="fr-label" for="placeholder_name">Nom complet</label>
  <input class="fr-input" placeholder="Jean Dupont" type="text" name="placeholder[name]" id="placeholder_name" />
</div>

Champ désactivé

<%= f.dsfr_text_field :name, disabled: true %>

<div class="fr-input-group">
  <label class="fr-label" for="desactive_name">Nom complet</label>
  <input class="fr-input" disabled="disabled" type="text" name="desactive[name]" id="desactive_name" />
</div>

Avec attributs data

<%= f.dsfr_text_field :name, data: { controller: "autocomplete", action: "autocomplete#search" } %>

<div class="fr-input-group">
  <label class="fr-label" for="data_name">Nom complet</label>
  <input class="fr-input" data-controller="autocomplete" data-action="autocomplete#search" type="text" name="data[name]" id="data_name" />
</div>

Champ en erreur

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

Nom complet Ce champ est obligatoireNom complet Le nom doit contenir au moins 2 caractères

<%= f.dsfr_text_field :name %>

<div class="fr-input-group fr-input-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_name">Nom complet</label>
  </div>
  <div class="field_with_errors">
    <input class="fr-input" type="text" name="erreur[name]" id="erreur_name" />
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Nom complet Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Nom complet Le nom doit contenir au moins 2 caractères</span>
  </p>
</div>