daisyUI : formulaires

daisyUI 5 stylise les éléments de formulaire natifs. La structure recommandée utilise fieldset et label (les classes form-control et label-text de la version 4 ont disparu : voir Migration et dépannage).

Un champ de texte

<fieldset class="fieldset">
  <legend class="fieldset-legend">Adresse e-mail</legend>
  <input
    type="email"
    class="input w-full"
    placeholder="nom@exemple.com"
    required
  />
  <p class="label">Utilisée uniquement pour vous répondre.</p>
</fieldset>

Classe	Rôle
`fieldset`	Regroupe un champ et son libellé
`fieldset-legend`	Titre du champ
`label`	Texte d’aide ou libellé secondaire
`input`	Champ de saisie (bordure par défaut en v5)

Associer un champ à son libellé pour l’accessibilité : <label for="email"> + id="email", ou envelopper le champ dans un <label>.

<label class="input w-full">
  <span class="label">E-mail</span>
  <input type="email" id="email" placeholder="nom@exemple.com" required />
</label>

Cette forme place le libellé à l’intérieur du champ.

Variantes des champs

<input type="text" class="input input-primary" />
<input type="text" class="input input-success" />
<input type="text" class="input input-error" aria-invalid="true" />
<input type="text" class="input input-sm" />
<input type="text" class="input input-lg" />
<input type="text" class="input input-ghost" />
<input type="text" class="input" disabled value="Désactivé" />

Type	Classes
Couleur	`input-primary`, `input-secondary`, `input-accent`, `input-neutral`, `input-info`, `input-success`, `input-warning`, `input-error`
Taille	`input-xs`, `input-sm`, `input-md`, `input-lg`, `input-xl`
Style	`input-ghost` (sans bordure ni fond)

Liste déroulante, zone de texte

<select class="select w-full">
  <option disabled selected>Choisir un pays</option>
  <option>France</option>
  <option>Belgique</option>
</select>

<textarea
  class="textarea w-full"
  rows="4"
  placeholder="Votre message"
></textarea>

Mêmes variantes de couleur et de taille : select-primary, select-sm, textarea-error, textarea-lg.

Cases à cocher, boutons radio, interrupteurs

<label class="label cursor-pointer justify-start gap-3">
  <input type="checkbox" class="checkbox checkbox-primary" />
  <span>J'accepte les conditions</span>
</label>

<fieldset class="fieldset">
  <legend class="fieldset-legend">Livraison</legend>
  <label class="label cursor-pointer justify-start gap-3">
    <input type="radio" name="livraison" class="radio radio-primary" checked />
    <span>Standard</span>
  </label>
  <label class="label cursor-pointer justify-start gap-3">
    <input type="radio" name="livraison" class="radio radio-primary" />
    <span>Express</span>
  </label>
</fieldset>

<label class="label cursor-pointer justify-start gap-3">
  <input type="checkbox" class="toggle toggle-success" checked />
  <span>Notifications</span>
</label>

Envelopper l’entrée et son texte dans le même <label> rend tout le texte cliquable et associe correctement le libellé.

Curseur et notation

<input
  type="range"
  min="0"
  max="100"
  value="40"
  class="range range-primary"
  aria-label="Volume"
/>

<div class="rating" role="radiogroup" aria-label="Note">
  <input
    type="radio"
    name="note"
    class="mask mask-star-2 bg-orange-400"
    aria-label="1 étoile"
  />
  <input
    type="radio"
    name="note"
    class="mask mask-star-2 bg-orange-400"
    aria-label="2 étoiles"
    checked
  />
  <input
    type="radio"
    name="note"
    class="mask mask-star-2 bg-orange-400"
    aria-label="3 étoiles"
  />
</div>

Sélecteur de fichier

<input type="file" class="file-input file-input-primary w-full" />

Groupes de champs

<div class="join">
  <input
    class="input join-item"
    placeholder="Rechercher"
    aria-label="Recherche"
  />
  <button class="btn btn-primary join-item">Chercher</button>
</div>

join colle les éléments en un seul bloc.

Validation

daisyUI s’appuie sur la validation native du navigateur :

<input
  type="email"
  class="input validator"
  required
  placeholder="nom@exemple.com"
/>
<p class="validator-hint">Saisir une adresse e-mail valide.</p>

<input
  type="password"
  class="input validator"
  required
  minlength="12"
  placeholder="12 caractères minimum"
/>
<p class="validator-hint">12 caractères minimum.</p>

validator colore le champ en erreur ou en succès selon les contraintes HTML (required, minlength, pattern, type). validator-hint affiche le message seulement quand le champ est invalide.

Formulaire complet

<form
  class="mx-auto flex max-w-md flex-col gap-4"
  action="/contact"
  method="post"
>
  <fieldset class="fieldset">
    <legend class="fieldset-legend">Nom</legend>
    <input name="nom" class="input w-full" required />
  </fieldset>

  <fieldset class="fieldset">
    <legend class="fieldset-legend">Message</legend>
    <textarea
      name="message"
      class="textarea w-full"
      rows="5"
      required
    ></textarea>
  </fieldset>

  <label class="label cursor-pointer justify-start gap-3">
    <input type="checkbox" name="copie" class="checkbox" />
    <span>Recevoir une copie</span>
  </label>

  <button type="submit" class="btn btn-primary">Envoyer</button>
</form>

Avec React, l’état des champs se gère comme d’habitude (voir React : formulaires et événements) : daisyUI ne change que l’apparence.

Accessibilité

Un libellé visible ou aria-label pour chaque champ.
Messages d’erreur reliés au champ (aria-describedby) et annoncés.
Ne pas indiquer l’état d’erreur uniquement par la couleur : ajouter un texte.
Taille de zone cliquable suffisante sur mobile (input-lg ou h-12).

Dépannage

Symptôme	Piste
`form-control` / `label-text` sans effet	Classes retirées en v5 : utiliser `fieldset` et `label`
Le champ n’a pas de bordure	`input-ghost` appliqué, ou thème qui supprime les bordures (`--border: 0`)
`input-bordered` sans effet	Inutile en v5 : la bordure est le comportement par défaut
`validator` ne colore rien	Aucune contrainte HTML (`required`, `type`, `pattern`) sur le champ
Le champ ne prend pas toute la largeur	Ajouter `w-full`
Le curseur (`range`) est invisible	Couleur du thème proche du fond : `range-primary`