Edit Segmented Control

Name

Also known as (comma separated)

Brief definition Compact mutually exclusive options.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Accessible name", "default": "View period" }, { "id": "secondActive", "type": "toggle", "label": "Week active", "default": false }, { "id": "density", "type": "select", "label": "Density", "default": "comfortable", "options": [ "compact", "comfortable" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 20, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"segmented segmented--{{density}}\" role=\"radiogroup\" aria-label=\"{{label}}\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">\n <label class=\"segmented__seg\">\n <input type=\"radio\" name=\"seg\" class=\"segmented__input\"{{#unless secondActive}} checked{{/unless}}>\n <span>Day</span>\n </label>\n <label class=\"segmented__seg\">\n <input type=\"radio\" name=\"seg\" class=\"segmented__input\"{{#if secondActive}} checked{{/if}}>\n <span>Week</span>\n </label>\n</div>\n<style>\n.segmented { display: inline-flex; background: #FAF7F2; padding: 3px; gap: 2px; font: 500 14px system-ui, sans-serif; color: #241430; border: 1.5px solid #24143020; }\n.segmented__seg { position: relative; cursor: pointer; border-radius: calc(var(--radius, 10px) - 3px); overflow: hidden; }\n.segmented__seg span { display: block; padding: 8px 16px; }\n.segmented--compact .segmented__seg span { padding: 5px 11px; font-size: 12px; }\n.segmented__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }\n.segmented__input:checked + span { background: var(--accent); color: #FAF7F2; }\n.segmented__input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"segmented-tw segmented-tw--{{density}} inline-flex bg-[#FAF7F2] p-[3px] gap-0.5 font-sans text-sm font-medium text-[#241430] border-[1.5px] border-[#24143020]\" role=\"radiogroup\" aria-label=\"{{label}}\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">\n <label class=\"relative cursor-pointer overflow-hidden rounded-[7px]\">\n <input type=\"radio\" name=\"seg-tw\" class=\"segmented-input-tw absolute opacity-0 inset-0 m-0 cursor-pointer\"{{#unless secondActive}} checked{{/unless}}>\n <span class=\"block px-4 py-2\">Day</span>\n </label>\n <label class=\"relative cursor-pointer overflow-hidden rounded-[7px]\">\n <input type=\"radio\" name=\"seg-tw\" class=\"segmented-input-tw absolute opacity-0 inset-0 m-0 cursor-pointer\"{{#if secondActive}} checked{{/if}}>\n <span class=\"block px-4 py-2\">Week</span>\n </label>\n</div>\n<style>\n.segmented-tw--compact span { padding: 5px 11px !important; font-size: 12px; }\n.segmented-input-tw:checked + span { background: {{accent}}; color: #FAF7F2; }\n.segmented-input-tw:focus-visible + span { outline: 2px solid {{accent}}; outline-offset: 2px; }\n</style>", "react": "export function SegmentedControl({\n label = \"{{label}}\",\n secondActive = {{secondActive}},\n density = \"{{density}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n}) {\n const pad = density === \"compact\" ? \"5px 11px\" : \"8px 16px\";\n const fontSize = density === \"compact\" ? 12 : 14;\n const seg = (active) => ({\n display: \"block\", padding: pad, fontSize, borderRadius: Math.max(radius - 3, 0),\n background: active ? accent : \"transparent\", color: active ? \"#FAF7F2\" : \"#241430\",\n });\n return (\n <div role=\"radiogroup\" aria-label={label} style={{\n display: \"inline-flex\", background: \"#FAF7F2\", padding: 3, gap: 2, borderRadius: radius,\n fontFamily: \"system-ui, sans-serif\", fontWeight: 500, border: \"1.5px solid #24143020\",\n }}>\n <label style={{ cursor: \"pointer\" }}><span style={seg(!secondActive)}>Day</span></label>\n <label style={{ cursor: \"pointer\" }}><span style={seg(secondActive)}>Week</span></label>\n </div>\n );\n}" }