Edit Modal Wizard

Name

Also known as (comma separated)

Brief definition Multi-step workflow contained in a modal.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Create project" }, { "id": "step", "type": "number", "label": "Step", "default": 1, "min": 1, "max": 3, "step": 1 }, { "id": "variant", "type": "select", "label": "Variant", "default": "standard", "options": [ "standard", "compact" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "width", "type": "number", "label": "Width", "default": 420, "min": 320, "max": 600, "step": 20 }, { "id": "backdrop", "type": "toggle", "label": "Show backdrop", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"wizard-demo{{#if backdrop}} wizard-demo--backdrop{{/if}}\">\n <div class=\"wizard wizard--{{variant}} wizard--step{{step}}\" style=\"width:{{width}}px;--accent:{{accent}};\" role=\"dialog\" aria-modal=\"{{#if backdrop}}true{{/if}}{{#unless backdrop}}false{{/unless}}\" aria-labelledby=\"wizard-title\">\n <div class=\"wizard__header\">\n <h3 class=\"wizard__title\" id=\"wizard-title\">{{title}}</h3>\n <button class=\"wizard__close\" type=\"button\" aria-label=\"Close\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 1l12 12M13 1L1 13\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n </button>\n </div>\n <p class=\"wizard__progress\">Step {{step}} of 3</p>\n <div class=\"wizard__dots\" aria-hidden=\"true\">\n <span class=\"wizard__dot wizard__dot--1\"></span>\n <span class=\"wizard__dot wizard__dot--2\"></span>\n <span class=\"wizard__dot wizard__dot--3\"></span>\n </div>\n <div class=\"wizard__step wizard__step--1\">\n <h4>Project details</h4>\n <label class=\"wizard__field\">Name<input class=\"wizard__input\" type=\"text\" value=\"Untitled project\" readonly></label>\n <label class=\"wizard__field\">Description<input class=\"wizard__input\" type=\"text\" value=\"A short summary\" readonly></label>\n </div>\n <div class=\"wizard__step wizard__step--2\">\n <h4>Team and permissions</h4>\n <label class=\"wizard__field\">Team<input class=\"wizard__input\" type=\"text\" value=\"Design\" readonly></label>\n <label class=\"wizard__field\">Role<input class=\"wizard__input\" type=\"text\" value=\"Editor\" readonly></label>\n </div>\n <div class=\"wizard__step wizard__step--3\">\n <h4>Review and confirm</h4>\n <p class=\"wizard__summary\">Untitled project will be created for the Design team with Editor access.</p>\n </div>\n <div class=\"wizard__actions\">\n <button class=\"wizard__btn wizard__btn--ghost\" type=\"button\">Back</button>\n <button class=\"wizard__btn wizard__btn--solid\" type=\"button\">Next</button>\n </div>\n </div>\n</div>\n<style>\n.wizard-demo { display: grid; place-items: center; min-height: 380px; border-radius: 12px; }\n.wizard-demo--backdrop { background: rgba(36,20,48,.45); padding: 24px; }\n.wizard { font: 16px/1.5 system-ui, sans-serif; background: #FAF7F2; color: #241430; border-radius: 14px; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 24px; box-sizing: border-box; }\n.wizard--compact { padding: 16px; }\n.wizard__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }\n.wizard__title { margin: 0; font-size: 18px; font-weight: 600; }\n.wizard__close { background: none; border: none; cursor: pointer; color: #241430; padding: 4px; border-radius: 6px; }\n.wizard__close:hover, .wizard__close:focus-visible { background: var(--accent); outline: none; }\n.wizard__progress { margin: 0 0 10px; font-size: 13px; color: #24143099; }\n.wizard__dots { display: flex; gap: 6px; margin-bottom: 18px; }\n.wizard__dot { width: 8px; height: 8px; border-radius: 50%; background: #24143026; }\n.wizard__step { display: none; }\n.wizard__step h4 { margin: 0 0 12px; font-size: 15px; }\n.wizard__field { display: block; font-size: 13px; font-weight: 500; margin-bottom: 12px; }\n.wizard__input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1.5px solid #24143033; font: 14px system-ui, sans-serif; color: #241430; background: #fff; }\n.wizard__summary { font-size: 14px; color: #241430cc; margin: 0; }\n.wizard__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }\n.wizard__btn { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }\n.wizard__btn--ghost { background: transparent; border-color: #24143033; color: #241430; }\n.wizard__btn--solid { background: var(--accent); border-color: var(--accent); color: #241430; }\n.wizard__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.wizard--step1 .wizard__step--1 { display: block; }\n.wizard--step1 .wizard__dot--1 { background: var(--accent); }\n.wizard--step2 .wizard__step--2 { display: block; }\n.wizard--step2 .wizard__dot--1, .wizard--step2 .wizard__dot--2 { background: var(--accent); }\n.wizard--step3 .wizard__step--3 { display: block; }\n.wizard--step3 .wizard__dot--1, .wizard--step3 .wizard__dot--2, .wizard--step3 .wizard__dot--3 { background: var(--accent); }\n</style>", "tailwind": "<div class=\"grid place-items-center min-h-[380px] rounded-xl{{#if backdrop}} bg-[#241430]/45 p-6{{/if}}\">\n <div role=\"dialog\" aria-modal=\"{{#if backdrop}}true{{/if}}{{#unless backdrop}}false{{/unless}}\" aria-labelledby=\"wizard-tw-title\" class=\"wizard-tw wizard-tw--{{variant}} wizard-tw--step{{step}} bg-[#FAF7F2] text-[#241430] rounded-2xl shadow-2xl p-6 box-border font-sans\" style=\"width:{{width}}px;--accent:{{accent}};\">\n <div class=\"flex items-center justify-between mb-1.5\">\n <h3 id=\"wizard-tw-title\" class=\"m-0 text-lg font-semibold\">{{title}}</h3>\n <button type=\"button\" aria-label=\"Close\" class=\"bg-transparent border-none cursor-pointer text-[#241430] p-1 rounded-md hover:bg-[var(--accent)] focus-visible:bg-[var(--accent)] focus-visible:outline-none\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 1l12 12M13 1L1 13\" stroke=\"currentColor\" stroke-width=\"1.6\" fill=\"none\" stroke-linecap=\"round\"/></svg>\n </button>\n </div>\n <p class=\"m-0 mb-2.5 text-[13px] text-[#241430]/60\">Step {{step}} of 3</p>\n <div class=\"flex gap-1.5 mb-[18px]\" aria-hidden=\"true\">\n <span class=\"wizard-tw__dot wizard-tw__dot--1 w-2 h-2 rounded-full bg-[#24143026]\"></span>\n <span class=\"wizard-tw__dot wizard-tw__dot--2 w-2 h-2 rounded-full bg-[#24143026]\"></span>\n <span class=\"wizard-tw__dot wizard-tw__dot--3 w-2 h-2 rounded-full bg-[#24143026]\"></span>\n </div>\n <div class=\"wizard-tw__step wizard-tw__step--1 hidden\">\n <h4 class=\"mt-0 mb-3 text-[15px]\">Project details</h4>\n <label class=\"block text-[13px] font-medium mb-3\">Name<input type=\"text\" value=\"Untitled project\" readonly class=\"block w-full box-border mt-1 px-2.5 py-2 rounded-lg border border-[#24143033] text-sm bg-white\"></label>\n <label class=\"block text-[13px] font-medium mb-3\">Description<input type=\"text\" value=\"A short summary\" readonly class=\"block w-full box-border mt-1 px-2.5 py-2 rounded-lg border border-[#24143033] text-sm bg-white\"></label>\n </div>\n <div class=\"wizard-tw__step wizard-tw__step--2 hidden\">\n <h4 class=\"mt-0 mb-3 text-[15px]\">Team and permissions</h4>\n <label class=\"block text-[13px] font-medium mb-3\">Team<input type=\"text\" value=\"Design\" readonly class=\"block w-full box-border mt-1 px-2.5 py-2 rounded-lg border border-[#24143033] text-sm bg-white\"></label>\n <label class=\"block text-[13px] font-medium mb-3\">Role<input type=\"text\" value=\"Editor\" readonly class=\"block w-full box-border mt-1 px-2.5 py-2 rounded-lg border border-[#24143033] text-sm bg-white\"></label>\n </div>\n <div class=\"wizard-tw__step wizard-tw__step--3 hidden\">\n <h4 class=\"mt-0 mb-3 text-[15px]\">Review and confirm</h4>\n <p class=\"text-sm text-[#241430]/80 m-0\">Untitled project will be created for the Design team with Editor access.</p>\n </div>\n <div class=\"flex justify-end gap-2.5 mt-2\">\n <button type=\"button\" class=\"px-4 py-2 rounded-lg text-sm font-medium border border-[#24143033]\">Back</button>\n <button type=\"button\" class=\"px-4 py-2 rounded-lg text-sm font-medium\" style=\"background:{{accent}};border:1.5px solid {{accent}};\">Next</button>\n </div>\n </div>\n</div>\n<style>\n.wizard-tw--compact { padding: 16px !important; }\n.wizard-tw--step1 .wizard-tw__step--1 { display: block; }\n.wizard-tw--step1 .wizard-tw__dot--1 { background: var(--accent); }\n.wizard-tw--step2 .wizard-tw__step--2 { display: block; }\n.wizard-tw--step2 .wizard-tw__dot--1, .wizard-tw--step2 .wizard-tw__dot--2 { background: var(--accent); }\n.wizard-tw--step3 .wizard-tw__step--3 { display: block; }\n.wizard-tw--step3 .wizard-tw__dot--1, .wizard-tw--step3 .wizard-tw__dot--2, .wizard-tw--step3 .wizard-tw__dot--3 { background: var(--accent); }\n</style>", "react": "export function ModalWizard({\n title = \"{{title}}\",\n step = {{step}},\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n width = {{width}},\n backdrop = {{backdrop}},\n}) {\n const padding = variant === \"compact\" ? 16 : 24;\n const fieldStyle = { display: \"block\", fontSize: 13, fontWeight: 500, marginBottom: 12 };\n const inputStyle = { display: \"block\", width: \"100%\", boxSizing: \"border-box\", marginTop: 4,\n padding: \"8px 10px\", borderRadius: 8, border: \"1.5px solid #24143033\", fontSize: 14, background: \"#fff\", color: \"#241430\" };\n const stepContent = {\n 1: (\n <>\n <h4 style={{ margin: \"0 0 12px\", fontSize: 15 }}>Project details</h4>\n <label style={fieldStyle}>Name<input type=\"text\" defaultValue=\"Untitled project\" readOnly style={inputStyle} /></label>\n <label style={fieldStyle}>Description<input type=\"text\" defaultValue=\"A short summary\" readOnly style={inputStyle} /></label>\n </>\n ),\n 2: (\n <>\n <h4 style={{ margin: \"0 0 12px\", fontSize: 15 }}>Team and permissions</h4>\n <label style={fieldStyle}>Team<input type=\"text\" defaultValue=\"Design\" readOnly style={inputStyle} /></label>\n <label style={fieldStyle}>Role<input type=\"text\" defaultValue=\"Editor\" readOnly style={inputStyle} /></label>\n </>\n ),\n 3: (\n <>\n <h4 style={{ margin: \"0 0 12px\", fontSize: 15 }}>Review and confirm</h4>\n <p style={{ fontSize: 14, color: \"#241430cc\", margin: 0 }}>Untitled project will be created for the Design team with Editor access.</p>\n </>\n ),\n }[step] ?? null;\n\n return (\n <div style={{ display: \"grid\", placeItems: \"center\", minHeight: 380, borderRadius: 12,\n background: backdrop ? \"rgba(36,20,48,.45)\" : \"transparent\", padding: backdrop ? 24 : 0 }}>\n <div role=\"dialog\" aria-modal={backdrop ? \"true\" : \"false\"} aria-labelledby=\"wizard-title\" style={{\n width, boxSizing: \"border-box\", background: \"#FAF7F2\", color: \"#241430\", borderRadius: 14,\n boxShadow: \"0 20px 44px rgba(36,20,48,.28)\", padding, fontFamily: \"system-ui, sans-serif\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: 6 }}>\n <h3 id=\"wizard-title\" style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>{title}</h3>\n <button type=\"button\" aria-label=\"Close\" style={{ background: \"none\", border: \"none\", cursor: \"pointer\",\n color: \"#241430\", padding: 4, borderRadius: 6 }}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M1 1l12 12M13 1L1 13\" stroke=\"currentColor\" strokeWidth=\"1.6\" fill=\"none\" strokeLinecap=\"round\"/></svg>\n </button>\n </div>\n <p style={{ margin: \"0 0 10px\", fontSize: 13, color: \"#24143099\" }}>Step {step} of 3</p>\n <div style={{ display: \"flex\", gap: 6, marginBottom: 18 }} aria-hidden=\"true\">\n <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: step >= 1 ? accent : \"#24143026\" }} />\n <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: step >= 2 ? accent : \"#24143026\" }} />\n <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: step >= 3 ? accent : \"#24143026\" }} />\n </div>\n {stepContent}\n <div style={{ display: \"flex\", justifyContent: \"flex-end\", gap: 10, marginTop: 8 }}>\n <button type=\"button\" style={{ padding: \"9px 16px\", borderRadius: 8, border: \"1.5px solid #24143033\",\n background: \"transparent\", color: \"#241430\", fontSize: 14, fontWeight: 500 }}>Back</button>\n <button type=\"button\" style={{ padding: \"9px 16px\", borderRadius: 8, border: `1.5px solid ${accent}`,\n background: accent, color: \"#241430\", fontSize: 14, fontWeight: 500 }}>{step >= 3 ? \"Finish\" : \"Next\"}</button>\n </div>\n </div>\n </div>\n );\n}" }