Edit Filter Drawer

Name

Also known as (comma separated)

Brief definition Panel containing filters.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Title", "default": "Filters" }, { "id": "open", "type": "toggle", "label": "Open", "default": true }, { "id": "inStock", "type": "toggle", "label": "In stock checked", "default": true }, { "id": "density", "type": "select", "label": "Density", "default": "cosy", "options": [ "cosy", "comfortable" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

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