drawer filter panel checkboxes sort price sidebar drawer filter checkboxes radio sort price range apply reset filter drawer panel side panel with filter controls
Drawer Filter
Fetch pattern JSON:
curl https://webspire.de/patterns/drawer/filter.json filter.html
<!-- Static preview — shows filter drawer panel inline -->
<div class="ws-drawer mx-auto max-w-sm">
<div class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-xl">
<!-- Header -->
<div class="flex items-center justify-between border-b border-[var(--ws-color-border)] px-6 py-4">
<h2 class="text-lg font-semibold text-[var(--ws-color-text)]">Filters</h2>
<button type="button" class="rounded-lg p-1 text-[var(--ws-color-text-muted)] transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Close filters">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button>
</div>
<!-- Filter content -->
<div class="flex-1 space-y-6 p-6">
<!-- Checkboxes: Category -->
<fieldset>
<legend class="mb-3 text-sm font-semibold text-[var(--ws-color-text)]">Category</legend>
<div class="space-y-2.5">
<label class="flex items-center gap-2.5">
<input type="checkbox" checked class="h-4 w-4 rounded border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Design</span>
</label>
<label class="flex items-center gap-2.5">
<input type="checkbox" class="h-4 w-4 rounded border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Development</span>
</label>
<label class="flex items-center gap-2.5">
<input type="checkbox" class="h-4 w-4 rounded border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Marketing</span>
</label>
</div>
</fieldset>
<!-- Radio: Sort -->
<fieldset>
<legend class="mb-3 text-sm font-semibold text-[var(--ws-color-text)]">Sort by</legend>
<div class="space-y-2.5">
<label class="flex items-center gap-2.5">
<input type="radio" name="sort" checked class="h-4 w-4 border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Newest</span>
</label>
<label class="flex items-center gap-2.5">
<input type="radio" name="sort" class="h-4 w-4 border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Oldest</span>
</label>
<label class="flex items-center gap-2.5">
<input type="radio" name="sort" class="h-4 w-4 border-[var(--ws-color-border)] accent-indigo-600"/>
<span class="text-sm text-[var(--ws-color-text-soft)]">Popular</span>
</label>
</div>
</fieldset>
<!-- Price range -->
<fieldset>
<legend class="mb-3 text-sm font-semibold text-[var(--ws-color-text)]">Price Range</legend>
<div class="flex items-center gap-2">
<input type="number" placeholder="Min" aria-label="Minimum price" class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] placeholder:text-[var(--ws-color-text-muted)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"/>
<span class="text-sm text-[var(--ws-color-text-muted)]" aria-hidden="true">–</span>
<input type="number" placeholder="Max" aria-label="Maximum price" class="w-full rounded-lg border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] px-3 py-2 text-sm text-[var(--ws-color-text)] placeholder:text-[var(--ws-color-text-muted)] focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"/>
</div>
</fieldset>
</div>
<!-- Footer -->
<div class="flex justify-end gap-3 border-t border-[var(--ws-color-border)] px-6 py-4">
<button type="button" class="rounded-lg border border-[var(--ws-color-border)] px-4 py-2 text-sm font-medium text-[var(--ws-color-text-soft)] transition hover:bg-[var(--ws-color-surface-alt)]">Reset</button>
<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-700">Apply</button>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
drawerfilterpanelcheckboxessortpricesidebar
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Filters title and close button. |
| filters | Yes | Checkbox, radio, and range filter controls. |
| footer | Yes | Reset and apply action buttons. |
Filter drawer with three control groups: category checkboxes (Design, Development, Marketing), sort radio buttons (Newest, Oldest, Popular), and a price range with min/max inputs. Footer has Reset and Apply buttons. Hidden by default with trigger.