Edit Switch

Name

Also known as (comma separated)

Brief definition Binary on/off control.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Marketing emails" }, { "id": "on", "type": "toggle", "label": "On", "default": true }, { "id": "size", "type": "select", "label": "Size", "default": "md", "options": [ "sm", "md" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "disabled", "type": "toggle", "label": "Disabled", "default": false } ]

Templates (JSON object keyed by format) { "html": "<label class=\"switch-row\" for=\"sw-1\">\n <span class=\"switch-row__label\">{{label}}</span>\n <span class=\"switch switch--{{size}}\" style=\"--accent:{{accent}};\">\n <input type=\"checkbox\" role=\"switch\" id=\"sw-1\" class=\"switch__input\"{{#if on}} checked{{/if}}{{#if disabled}} disabled{{/if}}{{#if on}} aria-checked=\"true\"{{/if}}{{#unless on}} aria-checked=\"false\"{{/unless}}>\n <span class=\"switch__track\"><span class=\"switch__thumb\"></span></span>\n <span class=\"switch__caption\">{{#if on}}On{{/if}}{{#unless on}}Off{{/unless}}</span>\n </span>\n</label>\n<style>\n.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; cursor: pointer; }\n.switch { display: inline-flex; align-items: center; gap: 8px; position: relative; }\n.switch__input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }\n.switch__track { width: 40px; height: 24px; border-radius: 12px; background: #24143030; flex: none; }\n.switch--sm .switch__track { width: 32px; height: 19px; border-radius: 10px; }\n.switch__thumb { display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #FAF7F2; }\n@media (prefers-reduced-motion: no-preference) {\n .switch__track { transition: background .15s; }\n .switch__thumb { transition: transform .15s; }\n}\n.switch--sm .switch__thumb { width: 13px; height: 13px; margin: 3px; }\n.switch__input:checked + .switch__track { background: var(--accent); }\n.switch__input:checked + .switch__track .switch__thumb { transform: translateX(16px); }\n.switch--sm .switch__input:checked + .switch__track .switch__thumb { transform: translateX(13px); }\n.switch__input:focus-visible + .switch__track { outline: 2px solid #241430; outline-offset: 2px; }\n.switch__input:disabled + .switch__track { opacity: .5; cursor: not-allowed; }\n.switch__caption { font-size: 12px; opacity: .7; width: 20px; }\n</style>", "tailwind": "<label for=\"sw-1-tw\" class=\"flex items-center justify-between gap-4 font-sans text-sm text-[#241430] max-w-[300px] cursor-pointer\">\n <span>{{label}}</span>\n <span class=\"switch-tw switch-tw--{{size}} inline-flex items-center gap-2 relative\" style=\"--accent:{{accent}};\">\n <input type=\"checkbox\" role=\"switch\" id=\"sw-1-tw\" class=\"switch-input-tw absolute opacity-0 w-10 h-6 m-0 cursor-pointer\"{{#if on}} checked{{/if}}{{#if disabled}} disabled{{/if}}{{#if on}} aria-checked=\"true\"{{/if}}{{#unless on}} aria-checked=\"false\"{{/unless}}>\n <span class=\"switch-track-tw w-10 h-6 rounded-full bg-[#24143030] flex-none block\"><span class=\"switch-thumb-tw block w-[18px] h-[18px] m-[3px] rounded-full bg-[#FAF7F2]\"></span></span>\n <span class=\"text-xs opacity-70 w-5\">{{#if on}}On{{/if}}{{#unless on}}Off{{/unless}}</span>\n </span>\n</label>\n<style>\n.switch-tw--sm .switch-track-tw { width: 32px; height: 19px; border-radius: 10px; }\n.switch-tw--sm .switch-thumb-tw { width: 13px; height: 13px; }\n.switch-input-tw:checked + .switch-track-tw { background: {{accent}}; }\n.switch-input-tw:checked + .switch-track-tw .switch-thumb-tw { transform: translateX(16px); }\n.switch-tw--sm .switch-input-tw:checked + .switch-track-tw .switch-thumb-tw { transform: translateX(13px); }\n.switch-input-tw:focus-visible + .switch-track-tw { outline: 2px solid #241430; outline-offset: 2px; }\n.switch-input-tw:disabled + .switch-track-tw { opacity: .5; }\n@media (prefers-reduced-motion: no-preference) {\n .switch-input-tw:checked + .switch-track-tw .switch-thumb-tw { transition: transform .15s; }\n}\n</style>", "react": "export function Switch({\n label = \"{{label}}\",\n on = {{on}},\n size = \"{{size}}\",\n accent = \"{{accent}}\",\n disabled = {{disabled}},\n}) {\n const sm = size === \"sm\";\n const trackW = sm ? 32 : 40, trackH = sm ? 19 : 24, thumb = sm ? 13 : 18;\n return (\n <>\n <label style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", gap: 16, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", maxWidth: 300, cursor: disabled ? \"not-allowed\" : \"pointer\" }}>\n <span>{label}</span>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}>\n <span role=\"switch\" aria-checked={on} style={{\n width: trackW, height: trackH, borderRadius: trackH / 2,\n background: on ? accent : \"#24143030\", position: \"relative\", display: \"inline-block\",\n opacity: disabled ? 0.5 : 1,\n }}>\n <span className=\"switch-thumb\" style={{\n display: \"block\", width: thumb, height: thumb, margin: 3, borderRadius: \"50%\", background: \"#FAF7F2\",\n transform: on ? `translateX(${trackW - thumb - 6}px)` : \"translateX(0)\",\n }} />\n </span>\n <span style={{ fontSize: 12, opacity: .7, width: 20 }}>{on ? \"On\" : \"Off\"}</span>\n </span>\n </label>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .switch-thumb { transition: transform .15s; }\n }\n `}</style>\n </>\n );\n}" }