Formulaires

Champ texte

Pattern de base : fieldset + fieldset-legend pour le label, fieldset-label pour l'aide sous le champ. Valable pour tous les types d'input.

<fieldset class="fieldset">
  <legend class="fieldset-legend">Nom du client</legend>
  <input type="text" class="input w-full" placeholder="ex. Dupont SA">
  <p class="fieldset-label">Nom légal complet de l'entreprise.</p>
</fieldset>

États des champs

Cinq états couvrent tous les cas. L'état focus est géré automatiquement par le navigateur et DaisyUI.

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

<!-- Succès -->
<fieldset class="fieldset">
  <legend class="fieldset-legend">Email de contact</legend>
  <input type="email" class="input input-success w-full" value="contact@client.be">
  <p class="fieldset-label text-success">Email vérifié.</p>
</fieldset>

<!-- Désactivé -->
<input type="text" class="input w-full" value="CMD-0241" disabled>

Textarea

Même structure fieldset que les inputs. Utiliser pour les notes, descriptions, remarques libres.

<fieldset class="fieldset">
  <legend class="fieldset-legend">Description</legend>
  <textarea class="textarea w-full" rows="4" placeholder="Saisir une description..."></textarea>
  <p class="fieldset-label">Max 500 caractères.</p>
</fieldset>

Select natif

Pour les listes courtes et fixes. Toujours inclure une option disabled + selected comme placeholder.

<fieldset class="fieldset">
  <legend class="fieldset-legend">Fournisseur</legend>
  <select class="select w-full">
    <option disabled selected>Sélectionner un fournisseur</option>
    <option>Stanley/Stella</option>
    <option>B&C Collection</option>
    <option>Gildan</option>
  </select>
</fieldset>

Select multiselect (Tom Select)

Utilisé dans les apps Rails pour les sélections multiples avec recherche et suppression individuelle. Pas de démo interactive ici — nécessite une initialisation JS.

<!-- Tom Select (Rails apps) — nécessite tom-select JS + CSS -->
<select id="fournisseurs" multiple class="w-full">
  <option>Stanley/Stella</option>
  <option>B&C Collection</option>
  <option>Gildan</option>
</select>
<script>
new TomSelect('#fournisseurs', {
  plugins: ['remove_button'],
  create: false,
  placeholder: 'Sélectionner des fournisseurs...'
});
</script>

Checkbox

Pour les options multiples indépendantes. Toujours utiliser checkbox-primary pour respecter la charte MC.

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="checkbox checkbox-primary checkbox-sm">
  <span class="text-sm font-body">Personnalisation requise</span>
</label>

Radio

Pour un choix exclusif parmi une liste. Grouper les boutons radio par un même attribut name.

<div class="flex flex-col gap-2">
  <label class="flex items-center gap-2 cursor-pointer">
    <input type="radio" name="type" class="radio radio-primary radio-sm">
    <span class="text-sm">Production standard</span>
  </label>
  <label class="flex items-center gap-2 cursor-pointer">
    <input type="radio" name="type" class="radio radio-primary radio-sm">
    <span class="text-sm">Production spéciale</span>
  </label>
</div>

Toggle (switch)

Pour les préférences binaires à effet immédiat (activer/désactiver une fonctionnalité). Ne pas utiliser à la place d'une checkbox dans un formulaire de soumission.

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="toggle toggle-primary toggle-sm" checked>
  <span class="text-sm font-body">Actif</span>
</label>

Champ obligatoire

Marquer les champs obligatoires avec un astérisque rouge dans la légende. Ajouter l'attribut required pour la validation HTML native.

<fieldset class="fieldset">
  <legend class="fieldset-legend">
    Référence produit
    <span class="text-error ml-0.5">*</span>
  </legend>
  <input type="text" class="input w-full" required>
</fieldset>

Règles