Edit Dashboard Filter

Name

Also known as (comma separated)

Brief definition Filter affecting dashboard content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Filter label", "default": "Region" }, { "id": "value", "type": "text", "label": "Selected value", "default": "EMEA" }, { "id": "active", "type": "toggle", "label": "Active", "default": true }, { "id": "count", "type": "number", "label": "Active filter count", "default": 3, "min": 0, "max": 20, "step": 1 }, { "id": "color", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dfilter {{#if active}}dfilter--active{{/if}}\" style=\"--c:{{color}};\">\n <span class=\"dfilter__label\">{{label}}:</span>\n <span class=\"dfilter__value\">{{value}}</span>\n {{#if active}}<button type=\"button\" class=\"dfilter__clear\" aria-label=\"Clear {{label}} filter\">×</button>{{/if}}\n <span class=\"dfilter__count\" aria-label=\"{{count}} filters active\">{{count}}</span>\n</div>\n<style>\n.dfilter { display: inline-flex; align-items: center; gap: 6px; font: 13px/1.4 system-ui, sans-serif; color: #241430; border: 1.5px solid #24143022; border-radius: 999px; padding: 5px 6px 5px 12px; background: #FAF7F2; }\n.dfilter--active { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, #FAF7F2); }\n.dfilter__label { opacity: .7; }\n.dfilter__value { font-weight: 600; }\n.dfilter__clear { border: none; background: var(--c); color: #241430; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 13px; }\n.dfilter__clear:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }\n.dfilter__count { font-size: 11px; font-weight: 700; background: #241430; color: #FAF7F2; border-radius: 999px; padding: 1px 6px; }\n</style>", "tailwind": "<div class=\"dfilter-tw {{#if active}}dfilter-tw--active{{/if}} inline-flex items-center gap-1.5 font-sans text-[13px] text-[#241430] border-[1.5px] border-[#24143022] rounded-full py-1.5 pl-3 pr-1.5 bg-[#FAF7F2]\" style=\"--c:{{color}};\">\n <span class=\"opacity-70\">{{label}}:</span>\n <span class=\"font-semibold\">{{value}}</span>\n {{#if active}}<button type=\"button\" class=\"border-none rounded-full w-[18px] h-[18px] text-[13px] leading-none cursor-pointer\" style=\"background:var(--c);\" aria-label=\"Clear {{label}} filter\">×</button>{{/if}}\n <span class=\"text-[11px] font-bold bg-[#241430] text-[#FAF7F2] rounded-full px-1.5\" aria-label=\"{{count}} filters active\">{{count}}</span>\n</div>\n<style>\n.dfilter-tw--active { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 18%, #FAF7F2) !important; }\n</style>", "react": "export function DashboardFilter({\n label = \"{{label}}\",\n value = \"{{value}}\",\n active = {{active}},\n count = {{count}},\n color = \"{{color}}\",\n}) {\n return (\n <div style={{\n display: \"inline-flex\", alignItems: \"center\", gap: 6, font: \"13px/1.4 system-ui, sans-serif\",\n color: \"#241430\", border: `1.5px solid ${active ? color : \"#24143022\"}`, borderRadius: 999,\n padding: \"5px 6px 5px 12px\", background: active ? `${color}2e` : \"#FAF7F2\",\n }}>\n <span style={{ opacity: 0.7 }}>{label}:</span>\n <span style={{ fontWeight: 600 }}>{value}</span>\n {active && (\n <button type=\"button\" aria-label={`Clear ${label} filter`} style={{ border: \"none\", background: color, color: \"#241430\", width: 18, height: 18, borderRadius: \"50%\", cursor: \"pointer\", lineHeight: 1, fontSize: 13 }}>×</button>\n )}\n <span aria-label={`${count} filters active`} style={{ fontSize: 11, fontWeight: 700, background: \"#241430\", color: \"#FAF7F2\", borderRadius: 999, padding: \"1px 6px\" }}>{count}</span>\n </div>\n );\n}" }