Chips con check
Un punto gira y se convierte en un check al activar la opción. Puedes marcar varios a la vez.
Ajustes
Código
<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>Todo</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>Diseño</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>Código</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>Fotos</button></div>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
Dónde usarlo
Úsalos cuando se pueden combinar opciones, como los servicios en una web de alquiler vacacional: wifi, piscina, parking, se admiten mascotas. El check deja claro qué está activo y qué no, y eso importa cuando hay cuatro o cinco filtros marcados a la vez. Te vienen bien si buscas chips de selección múltiple o chips tipo checkbox.
Como se activan y desactivan, actualiza la lista o el número de resultados al momento, para que cada toque se note. No los uses donde solo cabe una respuesta, como el orden de la lista. Ahí queda más claro un control segmentado.