HTML + CSSFiltres
Filtre d'équipements à icônes
Six équipements en tuiles à icône qu'on coche et décoche, avec un compteur en direct des filtres choisis.
Réglages
16px
1x
Code
<fieldset class="uv-fam"><legend>Services</legend><div class="gr"><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 9a14 14 0 0 1 19 0M5.5 12.5a9.5 9.5 0 0 1 13 0M8.7 16a5 5 0 0 1 6.6 0"/><circle cx="12" cy="19" r=".9" fill="currentColor"/></svg><span class="nm">Wifi</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.7 0 3.2 1.2 4.8 0 3.1-1.2 4.7 0M8 14V5.5a2 2 0 0 1 4 0M16 14V5.5a2 2 0 0 0-4 0M8 8.5h8M8 11.5h8"/></svg><span class="nm">Piscine</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M9.5 16.5v-9h3.2a2.7 2.7 0 0 1 0 5.4H9.5"/></svg><span class="nm">Parking</span><b aria-hidden="true"></b></span></label><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6.5" cy="10" r="1.8"/><circle cx="10" cy="6" r="1.8"/><circle cx="14" cy="6" r="1.8"/><circle cx="17.5" cy="10" r="1.8"/><path d="M12 11.5c-2.6 0-5 3.6-5 5.6 0 1.6 1.4 2.4 2.8 2 1.5-.4 2.9-.4 4.4 0 1.4.4 2.8-.4 2.8-2 0-2-2.4-5.6-5-5.6z"/></svg><span class="nm">Animaux</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5L12 7l2.5-2.5M9.5 19.5L12 17l2.5 2.5"/></svg><span class="nm">Climatisation</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 3.5v7M5 3.5v4a2 2 0 0 0 4 0v-4M7 10.5v10M16.5 20.5v-17c-2.2 0-3.5 2.7-3.5 6.5 0 1.8.8 3 3.5 3"/></svg><span class="nm">Cuisine</span><b aria-hidden="true"></b></span></label></div><p class="ct"><span class="n"></span> <span>sélectionnés</span></p></fieldset>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
Voir tout : FiltresOù l’utiliser
Locations de vacances, hôtels, espaces de coworking et salles de sport filtrent tous par équipements, et les icônes rendent la liste plus rapide à parcourir que de simples cases. Chaque tuile associe une icône au trait et un nom court ; cochée, elle se teinte, l'icône prend la couleur et une petite coche apparaît dans le coin. Un compteur CSS indique le nombre choisi.
Les tuiles sont des cases natives dans un fieldset, compatibles avec les formulaires, le clavier et les lecteurs d'écran. Change icônes et noms dans le code.