Barra de filtros con etiquetas
Desplegables arriba y, debajo, cada elección se convierte en una etiqueta que se puede quitar con animación.
Ajustes
Código
<div class="uv-ftb"><div class="rw"><div class="dd"><button class="tg">Categoría<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="Diseño">Diseño</button><button data-v="Código">Código</button><button data-v="Fotos">Fotos</button></div></div><div class="dd"><button class="tg">Precio<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="Gratis">Gratis</button><button data-v="Premium">Premium</button></div></div><div class="dd"><button class="tg">Nivel<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="Básico">Básico</button><button data-v="Avanzado">Avanzado</button></div></div></div><div class="tags"></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
Buena distribución para catálogos con rejillas anchas, donde una barra lateral robaría espacio. Una plataforma de cursos online, por ejemplo, con Categoría, Precio y Nivel en fila. Cada elección aparece debajo como etiqueta, así se ven y se deshacen los filtros de un vistazo. Responde a quien busca una barra de filtros horizontal con chips eliminables.
Deja fijo el texto de cada desplegable, como «Nivel», y que las etiquetas muestren los valores. Añade un «Borrar todo» cuando haya tres o más. Si la fila se llena, esconde los filtros menos usados tras un botón «Más».