e-commerce filter sidebar category price rating filter sidebar category price brand rating checkbox product filter sidebar e-commerce category filter
Product Filter Base
Fetch pattern JSON:
curl https://webspire.de/patterns/product-filter/base.json base.html
<aside
class="ws-product-filter"
style="
--ws-product-filter-bg: oklch(0.98 0.005 75);
--ws-product-filter-text: oklch(0.2 0.02 75);
--ws-product-filter-text-soft: oklch(0.45 0.015 75);
--ws-product-filter-border: oklch(0.85 0.01 75);
--ws-product-filter-accent: oklch(0.55 0.15 150);
--ws-product-filter-action-bg: oklch(0.35 0.02 75);
--ws-product-filter-action-text: oklch(0.98 0.005 75);
"
>
<div class="w-64 space-y-6 rounded-xl p-6" style="background:var(--ws-product-filter-bg);border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text)" role="search" aria-label="Product filters">
<h2 class="text-lg font-bold" style="color:var(--ws-product-filter-text)">Filters</h2>
<!-- Category -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-filter-text)">Category</legend>
<div class="mt-3 space-y-2">
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Electronics <span class="ml-auto text-xs">(42)</span></label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Accessories <span class="ml-auto text-xs">(28)</span></label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Clothing <span class="ml-auto text-xs">(65)</span></label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Home <span class="ml-auto text-xs">(19)</span></label>
</div>
</fieldset>
<!-- Price Range -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-filter-text)">Price Range</legend>
<div class="mt-3 flex items-center gap-2">
<input type="number" placeholder="Min" class="w-full rounded-lg px-3 py-2 text-sm" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text);background:var(--ws-product-filter-bg)" aria-label="Minimum price">
<span class="text-sm" style="color:var(--ws-product-filter-text-soft)">–</span>
<input type="number" placeholder="Max" class="w-full rounded-lg px-3 py-2 text-sm" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text);background:var(--ws-product-filter-bg)" aria-label="Maximum price">
</div>
</fieldset>
<!-- Brand -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-filter-text)">Brand</legend>
<div class="mt-3 space-y-2">
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Acme Corp</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> TechFlow</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> NovaCraft</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)"><input type="checkbox" class="rounded" style="accent-color:var(--ws-product-filter-accent)"> Evergreen</label>
</div>
</fieldset>
<!-- Rating -->
<fieldset>
<legend class="text-sm font-semibold" style="color:var(--ws-product-filter-text)">Rating</legend>
<div class="mt-3 space-y-2">
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)">
<input type="radio" name="rating" class="rounded-full" style="accent-color:var(--ws-product-filter-accent)">
<span class="flex gap-0.5" role="img" aria-label="4 stars and up">
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</span>
& up
</label>
<label class="flex items-center gap-2 text-sm" style="color:var(--ws-product-filter-text-soft)">
<input type="radio" name="rating" class="rounded-full" style="accent-color:var(--ws-product-filter-accent)">
<span class="flex gap-0.5" role="img" aria-label="3 stars and up">
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-4 w-4" style="color:var(--ws-product-filter-accent)" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</span>
& up
</label>
</div>
</fieldset>
<!-- Actions -->
<div class="flex flex-col gap-2 pt-2">
<button type="button" class="w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-product-filter-action-bg);color:var(--ws-product-filter-action-text)">Apply Filters</button>
<button type="button" class="w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-70" style="border:1px solid var(--ws-product-filter-border);color:var(--ws-product-filter-text-soft)">Clear All</button>
</div>
</div>
</aside>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commercefiltersidebarcategorypricerating
Slots
| Name | Required | Description |
|---|---|---|
| categories | Yes | Category checkbox group. |
| priceRange | Yes | Min/max price inputs. |
| brands | No | Brand checkbox group. |
| rating | No | Star rating radio filter. |
| actions | Yes | Apply and clear buttons. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | w-64 | Filter panel width utility. |
Base variant for the Product Filter family. Use as a sidebar filter panel alongside product grids.