Panel containing filters.
<details class="fdrawer fdrawer--cosy" style="--accent:#F5C2E0;" open>
<summary class="fdrawer__summary">Filters</summary>
<div class="fdrawer__body">
<fieldset class="fdrawer__group">
<legend class="fdrawer__legend">Availability</legend>
<label class="fdrawer__option">
<input type="checkbox" name="availability" value="in-stock" checked>
In stock
</label>
<label class="fdrawer__option">
<input type="checkbox" name="availability" value="on-sale">
On sale
</label>
</fieldset>
<fieldset class="fdrawer__group">
<legend class="fdrawer__legend">Size</legend>
<label class="fdrawer__option">
<input type="checkbox" name="size" value="small">
Small
</label>
<label class="fdrawer__option">
<input type="checkbox" name="size" value="medium">
Medium
</label>
</fieldset>
<button class="fdrawer__apply" type="button">Apply filters</button>
</div>
</details>
<style>
.fdrawer { font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; border: 1.5px solid #24143026; background: #FAF7F2; }
.fdrawer__summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; }
.fdrawer__summary::-webkit-details-marker { display: none; }
.fdrawer__summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; }
@media (prefers-reduced-motion: no-preference) {
.fdrawer__summary::before { transition: transform .15s; }
}
.fdrawer[open] .fdrawer__summary::before { transform: rotate(90deg); }
.fdrawer__body { padding: 0 14px 14px; display: grid; gap: 14px; }
.fdrawer--comfortable .fdrawer__body { padding: 0 20px 20px; gap: 20px; }
.fdrawer__group { border: none; padding: 0; margin: 0; }
.fdrawer__legend { padding: 0; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.fdrawer__option { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.fdrawer__option input { accent-color: var(--accent); width: 16px; height: 16px; }
.fdrawer__apply { width: 100%; padding: 10px; font: inherit; font-weight: 600; color: #241430; background: var(--accent); border: none; cursor: pointer; }
.fdrawer__apply:hover { filter: brightness(0.95); }
.fdrawer__apply:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style><details class="fdrawer-tw fdrawer-tw--cosy max-w-[300px] border-[1.5px] border-[#24143026] bg-[#FAF7F2] font-sans text-sm text-[#241430]" style="--accent:#F5C2E0;" open>
<summary class="cursor-pointer px-3.5 py-3 font-semibold list-none marker:hidden">Filters</summary>
<div class="px-3.5 pb-3.5 grid gap-3.5">
<fieldset class="border-0 p-0 m-0">
<legend class="p-0 font-semibold text-[13px] mb-1.5">Availability</legend>
<label class="flex items-center gap-2 py-0.5 cursor-pointer">
<input type="checkbox" name="availability" value="in-stock" checked class="w-4 h-4 accent-[var(--accent)]">
In stock
</label>
<label class="flex items-center gap-2 py-0.5 cursor-pointer">
<input type="checkbox" name="availability" value="on-sale" class="w-4 h-4 accent-[var(--accent)]">
On sale
</label>
</fieldset>
<fieldset class="border-0 p-0 m-0">
<legend class="p-0 font-semibold text-[13px] mb-1.5">Size</legend>
<label class="flex items-center gap-2 py-0.5 cursor-pointer">
<input type="checkbox" name="size" value="small" class="w-4 h-4 accent-[var(--accent)]">
Small
</label>
<label class="flex items-center gap-2 py-0.5 cursor-pointer">
<input type="checkbox" name="size" value="medium" class="w-4 h-4 accent-[var(--accent)]">
Medium
</label>
</fieldset>
<button type="button" class="w-full py-2.5 font-semibold text-[#241430] bg-[var(--accent)] border-none cursor-pointer hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430] focus-visible:outline-offset-2">Apply filters</button>
</div>
</details>
<style>
.fdrawer-tw--comfortable > div { padding: 0 20px 20px !important; gap: 20px !important; }
</style>export function FilterDrawer({
label = "Filters",
open = true,
inStock = true,
density = "cosy",
accent = "#F5C2E0",
}) {
const bodyStyle = density === "comfortable"
? { padding: "0 20px 20px", display: "grid", gap: 20 }
: { padding: "0 14px 14px", display: "grid", gap: 14 };
return (
<details open={open} style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 300, border: "1.5px solid #24143026", background: "#FAF7F2", "--accent": accent }}>
<summary style={{ cursor: "pointer", padding: "12px 14px", fontWeight: 600, listStyle: "none" }}>{label}</summary>
<div style={bodyStyle}>
<fieldset style={{ border: "none", padding: 0, margin: 0 }}>
<legend style={{ padding: 0, fontWeight: 600, fontSize: 13, marginBottom: 6 }}>Availability</legend>
<label style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0", cursor: "pointer" }}>
<input type="checkbox" name="availability" value="in-stock" defaultChecked={inStock} style={{ width: 16, height: 16, accentColor: accent }} />
In stock
</label>
<label style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0", cursor: "pointer" }}>
<input type="checkbox" name="availability" value="on-sale" style={{ width: 16, height: 16, accentColor: accent }} />
On sale
</label>
</fieldset>
<fieldset style={{ border: "none", padding: 0, margin: 0 }}>
<legend style={{ padding: 0, fontWeight: 600, fontSize: 13, marginBottom: 6 }}>Size</legend>
<label style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0", cursor: "pointer" }}>
<input type="checkbox" name="size" value="small" style={{ width: 16, height: 16, accentColor: accent }} />
Small
</label>
<label style={{ display: "flex", alignItems: "center", gap: 8, padding: "3px 0", cursor: "pointer" }}>
<input type="checkbox" name="size" value="medium" style={{ width: 16, height: 16, accentColor: accent }} />
Medium
</label>
</fieldset>
<button type="button" style={{ width: "100%", padding: 10, fontWeight: 600, color: "#241430", background: accent, border: "none", cursor: "pointer" }}>Apply filters</button>
</div>
</details>
);
}