Formulaires complexes

Quand utiliser un formulaire multi-étapes

La décision dépend du nombre de champs, du nombre de domaines métier distincts, et de la présence de données conditionnelles.

Indicateur de progression

Toujours affiché en haut du formulaire multi-étapes. Les étapes complétées sont marquées step-primary.

<ul class="steps w-full mb-6">
  <li class="step step-primary">Informations</li>
  <li class="step step-primary">Articles</li>
  <li class="step">Personnalisation</li>
  <li class="step">Récapitulatif</li>
</ul>

Étape 1 : formulaire basique

Pattern standard avec fieldset DaisyUI. Label au-dessus, texte d'aide via fieldset-label.

<div class="space-y-4 max-w-md">
  <fieldset class="fieldset">
    <legend class="fieldset-legend">Nom du client <span class="text-error ml-0.5">*</span></legend>
    <input type="text" class="input w-full" placeholder="ex. Dupont SA" required>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="fieldset-legend">Référence interne</legend>
    <input type="text" class="input w-full" placeholder="ex. CMD-2026-001">
    <p class="fieldset-label">Optionnel. Laissez vide pour auto-génération.</p>
  </fieldset>
  <fieldset class="fieldset">
    <legend class="fieldset-legend">Type de commande <span class="text-error ml-0.5">*</span></legend>
    <select class="select w-full">
      <option disabled selected>Sélectionner</option>
      <option>Standard</option>
      <option>Production spéciale</option>
      <option>Urgente</option>
    </select>
  </fieldset>
</div>

Étape récapitulative

Toujours afficher avant la soumission finale d'une action à fort impact. Permet à l'utilisateur de vérifier et corriger avant envoi.

<div class="card bg-base-100 border border-base-200 shadow-sm">
  <div class="card-body border-b border-base-200 bg-base-200/60 rounded-t-[var(--radius-box)]">
    <h2 class="card-title text-base">Récapitulatif avant envoi</h2>
  </div>
  <div class="card-body">
    <dl class="space-y-2 text-sm">
      <div class="flex justify-between py-1 border-b border-base-200">
        <dt class="text-base-content/60">Client</dt>
        <dd class="font-medium">Dupont SA</dd>
      </div>
      <!-- autres lignes -->
    </dl>
    <div class="flex gap-2 mt-4">
      <button class="btn btn-ghost btn-sm">← Modifier</button>
      <button class="btn btn-primary btn-sm flex-1">Soumettre la commande</button>
    </div>
  </div>
</div>

Validation

Valider au blur uniquement. Afficher l'erreur sous le champ avec input-error et fieldset-label text-error.

<fieldset class="fieldset">
  <legend class="fieldset-legend">Email de contact <span class="text-error ml-0.5">*</span></legend>
  <input type="email" class="input input-error w-full" value="email-invalide">
  <p class="fieldset-label text-error">Format d'email invalide.</p>
</fieldset>

Règles