Filtros
Filters with animated result count
As you toggle filters, the number on the button counts up or down to the new total.
Settings
Code
<div class="uv-frc"><p class="ti">Filters</p><label><span>Free shipping</span><input type="checkbox" role="switch" data-f="0.62"><i aria-hidden="true"></i></label><label><span>On sale</span><input type="checkbox" role="switch" data-f="0.35"><i aria-hidden="true"></i></label><label><span>Rated 4 or more</span><input type="checkbox" role="switch" data-f="0.7"><i aria-hidden="true"></i></label><label><span>What’s new</span><input type="checkbox" role="switch" data-f="0.28"><i aria-hidden="true"></i></label><button type="button"><span>View</span> <b>1.248</b> <span>results</span></button></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
See all FiltersWhere to use it
Mobile filter panels usually end with a button that applies them, and showing the number of results on that button tells people whether they are over filtering before they tap. Each switch here multiplies the total by a factor, and the number on the button rolls to the new value with an ease out, so the change is easy to follow.
The count uses the page language for thousands separators. Replace the factors with a call to your API, keep the button as the single action, and the switches remain native checkboxes for forms and screen readers.