Servicios con iconos
Seis servicios en baldosas con icono que se marcan y desmarcan, con un contador vivo de filtros elegidos.
Ajustes
Código
<fieldset class="uv-fam"><legend>Servicios</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">Piscina</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">Mascotas</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">Aire acondicionado</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">Cocina</span><b aria-hidden="true"></b></span></label></div><p class="ct"><span class="n"></span> <span>seleccionados</span></p></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Alquileres vacacionales, hoteles, coworkings y gimnasios filtran por servicios, y los iconos hacen la lista más rápida de recorrer que unos checkboxes sueltos. Cada baldosa une un icono de línea con un nombre corto; al marcarla se tiñe, el icono toma color y aparece un pequeño check en la esquina. Un contador CSS debajo dice cuántos van elegidos.
Las baldosas son checkboxes nativos dentro de un fieldset, así que funcionan con formularios, teclado y lectores de pantalla. Cambia iconos y nombres en el código y mantén los textos cortos.