Edit Search Bar

Name

Also known as (comma separated)

Brief definition Primary search input.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Search" }, { "id": "placeholder", "type": "text", "label": "Placeholder", "default": "Search…" }, { "id": "hasQuery", "type": "toggle", "label": "Has query (show clear)", "default": true }, { "id": "variant", "type": "select", "label": "Variant", "default": "outline", "options": [ "outline", "filled" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"sbar\" role=\"search\" style=\"--accent:{{accent}};\">\n <label class=\"sbar__label\" for=\"sbar-input\">{{label}}</label>\n <div class=\"sbar__box sbar__box--{{variant}}\">\n <input id=\"sbar-input\" class=\"sbar__input\" type=\"search\" placeholder=\"{{placeholder}}\">\n {{#if hasQuery}}<button type=\"button\" class=\"sbar__clear\" aria-label=\"Clear search\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"/></svg>\n </button>{{/if}}\n <button type=\"submit\" class=\"sbar__submit\">Search</button>\n </div>\n</form>\n<style>\n.sbar { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 360px; }\n.sbar__label { display: block; margin-bottom: 6px; font-weight: 500; }\n.sbar__box { display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 4px 4px 4px 12px; border-radius: 9px; }\n.sbar__box--outline { background: #FAF7F2; border: 1.5px solid #24143026; }\n.sbar__box--filled { background: #24143010; border: 1.5px solid transparent; }\n.sbar__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }\n.sbar__input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: #241430; outline: none; }\n.sbar__input::-webkit-search-cancel-button { display: none; }\n.sbar__clear { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: #24143014; color: #241430; cursor: pointer; }\n.sbar__clear:hover { background: #24143024; }\n.sbar__submit { flex: none; border: none; border-radius: 6px; padding: 7px 14px; font: inherit; font-weight: 600; background: var(--accent); color: #241430; cursor: pointer; }\n.sbar__submit:hover { filter: brightness(0.95); }\n</style>", "tailwind": "<form role=\"search\" class=\"block font-sans text-sm text-[#241430] max-w-[360px]\">\n <label for=\"sbar-input-tw\" class=\"block mb-1.5 font-medium\">{{label}}</label>\n <div class=\"sbar-box-tw sbar-box-tw--{{variant}} flex items-center gap-1.5 box-border pl-3 pr-1 py-1 rounded-[9px] border-[1.5px] focus-within:shadow-[0_0_0_3px_var(--tw-ring)]\" style=\"--tw-ring:color-mix(in srgb, {{accent}} 35%, transparent);\">\n <input id=\"sbar-input-tw\" type=\"search\" placeholder=\"{{placeholder}}\" class=\"flex-1 min-w-0 border-none bg-transparent outline-none [&::-webkit-search-cancel-button]:hidden\">\n {{#if hasQuery}}<button type=\"button\" aria-label=\"Clear search\" class=\"flex-none grid place-items-center w-[22px] h-[22px] rounded-full bg-[#24143014] hover:bg-[#24143024] text-[#241430]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"></path></svg>\n </button>{{/if}}\n <button type=\"submit\" class=\"flex-none rounded-md px-3.5 py-1.5 font-semibold hover:brightness-95\" style=\"background:{{accent}};color:#241430;\">Search</button>\n </div>\n</form>\n<style>\n.sbar-box-tw--outline { background: #FAF7F2; border-color: #24143026 !important; }\n.sbar-box-tw--filled { background: #24143010; border-color: transparent !important; }\n</style>", "react": "export function SearchBar({\n label = \"{{label}}\",\n placeholder = \"{{placeholder}}\",\n hasQuery = {{hasQuery}},\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n}) {\n const boxStyle = variant === \"filled\"\n ? { background: \"#24143010\", border: \"1.5px solid transparent\" }\n : { background: \"#FAF7F2\", border: \"1.5px solid #24143026\" };\n return (\n <form role=\"search\" style={{ display: \"block\", fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", maxWidth: 360 }}>\n <label htmlFor=\"sbar-input\" style={{ display: \"block\", marginBottom: 6, fontWeight: 500 }}>{label}</label>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, boxSizing: \"border-box\", padding: \"4px 4px 4px 12px\", borderRadius: 9, ...boxStyle }}>\n <input id=\"sbar-input\" type=\"search\" placeholder={placeholder} style={{ flex: 1, minWidth: 0, border: \"none\", background: \"transparent\", font: \"inherit\", color: \"#241430\", outline: \"none\" }} />\n {hasQuery && (\n <button type=\"button\" aria-label=\"Clear search\" style={{ flex: \"none\", display: \"grid\", placeItems: \"center\", width: 22, height: 22, border: \"none\", borderRadius: \"50%\", background: \"#24143014\", color: \"#241430\", cursor: \"pointer\" }}>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" /></svg>\n </button>\n )}\n <button type=\"submit\" style={{ flex: \"none\", border: \"none\", borderRadius: 6, padding: \"7px 14px\", font: \"inherit\", fontWeight: 600, background: accent, color: \"#241430\", cursor: \"pointer\" }}>Search</button>\n </div>\n </form>\n );\n}" }