dsfr_text_area

Génère une zone de texte multi-lignes <textarea> au DSFR.

Documentation DSFR - Champ de saisie

Usage basique

<%= f.dsfr_text_area :bio %>

<div class="fr-input-group">
  <label class="fr-label" for="usage-basique_bio">Biographie</label>
  <textarea class="fr-input" name="usage-basique[bio]" id="usage-basique_bio">
</textarea>
</div>

Options disponibles

OptionTypeDescription
label:StringTexte personnalisé pour le label
hint:StringTexte d'aide affiché sous le label
required:BooleanAffiche une astérisque rouge sitrue
rows:IntegerNombre de lignes visibles
placeholder:StringTexte indicatif dans le champ
disabled:BooleanDésactive le champ

Avec un label personnalisé

<%= f.dsfr_text_area :bio, label: "Présentez-vous" %>

<div class="fr-input-group">
  <label class="fr-label" for="label-personnalise_bio">Présentez-vous</label>
  <textarea class="fr-input" name="label-personnalise[bio]" id="label-personnalise_bio">
</textarea>
</div>

Avec un texte d'aide (hint)

<%= f.dsfr_text_area :bio, hint: "Décrivez votre parcours en quelques lignes" %>

<div class="fr-input-group">
  <label class="fr-label" for="hint_bio">Biographie<span class="fr-hint-text">Décrivez votre parcours en quelques lignes</span></label>
  <textarea class="fr-input" name="hint[bio]" id="hint_bio">
</textarea>
</div>

Champ obligatoire

<%= f.dsfr_text_area :bio, required: true %>

<div class="fr-input-group">
  <label class="fr-label" for="obligatoire_bio">Biographie</label>
  <textarea class="fr-input" required="required" name="obligatoire[bio]" id="obligatoire_bio">
</textarea>
</div>

Avec nombre de lignes personnalisé

<%= f.dsfr_text_area :bio, rows: 10 %>

<div class="fr-input-group">
  <label class="fr-label" for="rows_bio">Biographie</label>
  <textarea class="fr-input" rows="10" name="rows[bio]" id="rows_bio">
</textarea>
</div>

Avec placeholder

<%= f.dsfr_text_area :bio, placeholder: "Écrivez ici..." %>

<div class="fr-input-group">
  <label class="fr-label" for="placeholder_bio">Biographie</label>
  <textarea class="fr-input" placeholder="Écrivez ici..." name="placeholder[bio]" id="placeholder_bio">
</textarea>
</div>

Champ en erreur

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

Biographie Ce champ est obligatoireBiographie La biographie doit contenir au moins 10 caractères

<%= f.dsfr_text_area :bio %>

<div class="fr-input-group fr-input-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_bio">Biographie</label>
  </div>
  <div class="field_with_errors">
    <textarea class="fr-input" name="erreur[bio]" id="erreur_bio">
</textarea>
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Biographie Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Biographie La biographie doit contenir au moins 10 caractères</span>
  </p>
</div>