COMPOSANTS

Recherche

Recherche simple (avec icône)

L'icône loupe est positionnée en absolu à gauche. Le padding pl-8 compense pour ne pas chevaucher le texte saisi.

<div class="relative w-72">
  <input type="text" placeholder="Rechercher un produit..."
         class="input input-bordered input-sm w-full pl-8">
  <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/40"
       fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
</div>

Recherche avec bouton

Quand la recherche est déclenchée manuellement (pas en async). Le bouton est accolé à l'input via rounded-r-none / rounded-l-none.

<div class="flex w-96">
  <input type="text" placeholder="Référence, nom, fournisseur..."
         class="input input-bordered input-sm flex-1 rounded-r-none">
  <button class="btn btn-sm btn-primary rounded-l-none">Rechercher</button>
</div>

Recherche avec chargement async

Le spinner remplace ou complète l'icône loupe pendant la requête. Toujours debouncer à 300ms pour éviter les requêtes excessives.

<div class="relative w-72">
  <input type="text" placeholder="Rechercher..."
         class="input input-bordered input-sm w-full pl-8 pr-8">
  <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/40"
       fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
  <!-- Spinner visible during search -->
  <span class="loading loading-spinner loading-xs absolute right-2.5 top-1/2 -translate-y-1/2 text-primary"></span>
</div>

Barre de recherche dans la navbar

Version compacte pour les navbars sur fond mc-navy. L'input est transparent par défaut et devient blanc au focus pour maximiser la lisibilité.

<div class="relative">
  <input type="text" placeholder="Rechercher..."
         class="input input-sm w-48 pl-7 bg-white/10 text-white placeholder-white/40
                border-white/20 focus:bg-white focus:text-mc-navy
                focus:placeholder-gray-400 focus:border-transparent transition-all">
  <svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40"
       fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
</div>

✓ Toujours afficher une icône loupe à gauche (pl-8 pour compenser).

✓ Debounce 300ms pour la recherche async (évite les requêtes excessives).

✗ Ne jamais lancer la recherche à chaque keystroke sans debounce.

✗ Jamais de recherche sans feedback d'état vide si aucun résultat.