HTML + CSSFilters
Star rating filter with bars
Each star level shows how many reviews it has, and checking it colors its bar and star.
Settings
16px
1x
Code
<fieldset class="uv-frb"><legend>Rating</legend><label style="--w:100%"><input type="checkbox" checked><span class="st" aria-label="5 stars">5<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">412</span></label><label style="--w:65%"><input type="checkbox" checked><span class="st" aria-label="4 stars">4<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">268</span></label><label style="--w:22%"><input type="checkbox"><span class="st" aria-label="3 stars">3<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">91</span></label><label style="--w:8%"><input type="checkbox"><span class="st" aria-label="2 stars">2<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">34</span></label><label style="--w:5%"><input type="checkbox"><span class="st" aria-label="1 star">1<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span><span class="br"><i></i></span><span class="n">19</span></label></fieldset>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
Review filters work better when people see how many results each choice brings. This list shows five rows from five to one star, each with a bar proportional to its review count and the number at the end. Checked rows get a warm background, a colored star and a colored bar, so several levels can be combined at a glance.
Each row is a full-width checkbox label with a generous hit area. Feed widths and counts from your data in the HTML, and use the main color for the fill and the second for the selected background.