Composants

Formulaires

Anatomie d'un champ

Chaque champ = label + input + (help text ou error text). Le label est toujours au-dessus, jamais inline.

Nom exact tel qu'il apparaîtra sur la facture.

Format d'email invalide. 

<!-- Champ normal -->
<div>
  <label class="label">Nom du client <span class="text-red-500">*</span></label>
  <input class="input" type="text" placeholder="ex : Scouts de Namur" />
  <p class="help-text">Nom exact tel qu'il apparaîtra sur la facture.</p>
</div>

<!-- Champ en erreur -->
<div>
  <label class="label">Email de contact <span class="text-red-500">*</span></label>
  <input class="input input-error" type="email" />
  <p class="error-text">Format d'email invalide.</p>
</div>

Tous les éléments

Ce champ est en lecture seule.

Email vérifié.

Checkboxes et radios

Options multiples (checkbox)
Choix unique (radio)
<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="checkbox" class="checkbox" />
  <span class="text-sm text-mc-navy">Broderie</span>
</label>

<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="radio" class="radio" name="type" />
  <span class="text-sm text-mc-navy">Textile</span>
</label>

Groupement de champs

Regrouper les champs par domaine logique. Chaque groupe a un titre section (font-accent bold).

Informations client

Détails de la commande

Règles

✓ Label toujours au-dessus de l'input, jamais inline (sauf toggle)
✓ Champs obligatoires marqués * en rouge
✓ Validation au blur (quand on quitte le champ), pas seulement à la soumission
✓ Message d'erreur sous le champ, en rouge, avec icône
✓ Regrouper les champs liés par section avec un titre h3
✗ Ne pas valider sur chaque keystroke — trop agressif
✗ Ne pas utiliser le placeholder comme substitut au label
✗ Ne pas placer plus de 2 champs par ligne (sauf colonnes très larges)