Chips avec coche
Un petit point tourne et devient une coche quand l’option est activée. On peut en cocher plusieurs.
Réglages
Code
<div class="uv-fck"><button class="on"><span class="ic"><i></i><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><span class="ic"><i></i><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><span class="ic"><i></i><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><span class="ic"><i></i><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></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
À utiliser quand les options se combinent, comme les équipements sur un site de location de vacances : wifi, piscine, parking, animaux acceptés. La coche rend l’état de chaque filtre évident, ce qui compte quand quatre ou cinq sont actifs en même temps. Utile si vous cherchez des chips à sélection multiple ou des chips façon case à cocher.
Puisqu’ils s’activent et se désactivent, mettez à jour la liste ou le nombre de résultats tout de suite, pour que chaque clic ait un effet visible. Évitez-les quand une seule réponse a du sens, comme l’ordre de tri : un contrôle segmenté sera plus clair.