Multiselección con chips
Marca varias opciones con checks animados y míralas aparecer como chips encima del botón.
Ajustes
Código
<div class="uv-fdm"><div class="tags"></div><button class="tg">Añadir filtro <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="Todo"><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>Todo</button><button data-v="Diseñ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>Diseño</button><button data-v="Código"><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>Código</button><button data-v="Fotos"><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>Fotos</button><button data-v="Vídeo"><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>Vídeo</button></div></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
Encaja de forma natural en un portal de empleo: alguien marca Remoto, Media jornada y Freelance y ve sus elecciones apiladas sobre el botón, sin nada escondido dentro de un menú cerrado. También vale para elegir habilidades en un formulario de perfil o los ingredientes a evitar en una web de recetas. Búscalo como desplegable multiselección con checkboxes.
Los chips de arriba son lo que lo hace usable, así que deja sitio para que salten a una segunda línea. Si la gente suele marcar más de cinco opciones, una barra lateral con casillas será más cómoda que un menú.