Edit Controlled Component

Name

Also known as (comma separated)

Brief definition Parent controls component state.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "inputLabel", "type": "text", "label": "Field label", "default": "Name" }, { "id": "parentState", "type": "text", "label": "Parent state value", "default": "Ada" }, { "id": "locked", "type": "toggle", "label": "Typing blocked (parent owns value)", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ctrld\">\n <div class=\"ctrld__parent\">Parent state: <code>{{parentState}}</code></div>\n <span class=\"ctrld__arrow\" aria-hidden=\"true\">value=&quot;{{parentState}}&quot; &darr;</span>\n <label class=\"ctrld__label\">{{inputLabel}}</label>\n <input class=\"ctrld__input\" style=\"border-color:{{accent}};\" type=\"text\" value=\"{{parentState}}\" {{#if locked}}disabled{{/if}} />\n {{#if locked}}<p class=\"ctrld__note\">Typing is blocked &mdash; only the parent's state can change this value.</p>{{/if}}\n</div>\n<style>\n.ctrld { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.ctrld__parent { padding: 10px; border-radius: 8px; background: #24143010; font-size: 12px; margin-bottom: 4px; }\n.ctrld__parent code { font: 11px ui-monospace, monospace; }\n.ctrld__arrow { display: block; text-align: center; font-size: 10px; color: #24143080; margin-bottom: 8px; }\n.ctrld__label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }\n.ctrld__input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid; border-radius: 6px; font-size: 13px; background: #ffffff; color: #241430; }\n.ctrld__input:disabled { background: #24143008; cursor: not-allowed; opacity: .7; }\n.ctrld__note { margin: 8px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\">\n <div class=\"p-2.5 rounded-lg bg-[#24143010] text-xs mb-1\">Parent state: <code class=\"font-mono text-[11px]\">{{parentState}}</code></div>\n <span class=\"block text-center text-[10px] text-[#24143080] mb-2\" aria-hidden=\"true\">value=&quot;{{parentState}}&quot; &darr;</span>\n <label class=\"block text-[11px] font-semibold mb-1\">{{inputLabel}}</label>\n <input class=\"w-full box-border py-2 px-2.5 border-2 rounded-md text-[13px] bg-white text-[#241430] disabled:bg-[#24143008] disabled:cursor-not-allowed disabled:opacity-70\" style=\"border-color:{{accent}};\" type=\"text\" value=\"{{parentState}}\" {{#if locked}}disabled{{/if}} />\n {{#if locked}}<p class=\"mt-2 text-[10px] text-[#24143099]\">Typing is blocked &mdash; only the parent's state can change this value.</p>{{/if}}\n</div>", "react": "export function ControlledComponent({\n inputLabel = \"{{inputLabel}}\",\n parentState = \"{{parentState}}\",\n locked = {{locked}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <div style={{ padding: 10, borderRadius: 8, background: \"#24143010\", fontSize: 12, marginBottom: 4 }}>Parent state: <code style={{ fontFamily: \"ui-monospace, monospace\", fontSize: 11 }}>{parentState}</code></div>\n <span style={{ display: \"block\", textAlign: \"center\", fontSize: 10, color: \"#24143080\", marginBottom: 8 }}>value=\"{parentState}\" &darr;</span>\n <label style={{ display: \"block\", fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{inputLabel}</label>\n <input type=\"text\" value={parentState} readOnly disabled={locked}\n style={{ width: \"100%\", boxSizing: \"border-box\", padding: \"8px 10px\", border: `2px solid ${accent}`, borderRadius: 6, fontSize: 13, background: locked ? \"#24143008\" : \"#ffffff\", color: \"#241430\", opacity: locked ? .7 : 1 }} />\n {locked && <p style={{ margin: \"8px 0 0\", fontSize: 10, color: \"#24143099\" }}>Typing is blocked &mdash; only the parent's state can change this value.</p>}\n </div>\n );\n}" }