Mobile filter bar
A horizontally scrolling row of chips with faded edges and a fixed filter button carrying a badge.
Settings
Code
<div class="uv-fms"><div class="ph"><div class="bar"><button class="fx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg><span class="bd">2</span></button><div class="sc"><button class="on">All</button><button class="">Nearby</button><button class="">Top</button><button class="">New</button><button class="">Cheap</button><button class="">Family</button><button class="">Pool</button></div></div><div class="body"><span></span><span></span><span></span></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
This is the pattern hotel and holiday apps use above their results: Nearby, Cheapest, Family, Pool, and more off to the side. The faded edges hint that the row keeps going, and the fixed button with a badge leads to the full filter panel. Search for it as a horizontal scrolling chip bar or mobile filter bar.
Put the most used filters first, since many people never scroll the row. The badge should count active filters from the full panel, so nobody forgets they have something switched on. Test it with a thumb, not a mouse.