Sélection multiple en puces
Cochez plusieurs options avec des cases animées et voyez-les apparaître en chips au-dessus du bouton.
Réglages
Code
<div class="uv-fdm"><div class="tags"></div><button class="tg">Ajouter un filtre <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button data-v="Tout"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Tout</button><button data-v="Design"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Design</button><button data-v="Code"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Code</button><button data-v="Photos"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Photos</button><button data-v="Vidéo"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Vidéo</button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Un site d’offres d’emploi s’y prête bien : on coche Télétravail, Temps partiel et Freelance, et ses choix s’affichent au-dessus du bouton, rien ne reste caché dans un menu fermé. Il fonctionne aussi pour choisir des compétences dans un profil ou les ingrédients à exclure sur un site de recettes. On le cherche sous le nom de menu déroulant multi-sélection.
Ce sont les chips du dessus qui le rendent pratique, laissez-leur donc la place de passer sur une deuxième ligne. Si vos visiteurs cochent souvent plus de cinq options, une colonne de filtres avec cases sera plus confortable.