Edit form

Name

Also known as (comma separated)

Brief definition Form containing user input controls.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Join the waitlist" }, { "id": "buttonLabel", "type": "text", "label": "Submit label", "default": "Notify me" }, { "id": "accent", "type": "color", "label": "Accent", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "required", "type": "toggle", "label": "Email required", "default": true } ]

Templates (JSON object keyed by format) { "html": "<form class=\"frm\" style=\"--accent:{{accent}};\" onsubmit=\"return false\">\n <h3 class=\"frm__heading\">{{heading}}</h3>\n <label class=\"frm__label\" for=\"frm-email\">Email address</label>\n <input class=\"frm__input\" id=\"frm-email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\"{{#if required}} required{{/if}}>\n <button class=\"frm__submit\" type=\"submit\">{{buttonLabel}}</button>\n</form>\n<style>\n.frm { width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; border: 1.5px solid #24143020; display: flex; flex-direction: column; gap: 8px; }\n.frm__heading { margin: 0 0 4px; font-size: 17px; font-weight: 700; }\n.frm__label { font-size: 12px; font-weight: 600; color: #241430aa; }\n.frm__input { font: 14px system-ui, sans-serif; padding: 9px 11px; border-radius: 7px; border: 1.5px solid #24143035; }\n.frm__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }\n.frm__input:required { border-left: 3px solid var(--accent); }\n.frm__submit { margin-top: 6px; font: 700 14px system-ui, sans-serif; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #241430; cursor: pointer; }\n</style>", "tailwind": "<form class=\"w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-5 rounded-xl border-[1.5px] border-[#24143020] flex flex-col gap-2\" onsubmit=\"return false\">\n <h3 class=\"m-0 mb-1 text-[17px] font-bold\">{{heading}}</h3>\n <label class=\"text-xs font-semibold text-[#241430]/65\" for=\"frm-tw-email\">Email address</label>\n <input id=\"frm-tw-email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\" class=\"text-sm px-2.5 py-2 rounded-md border-[1.5px] border-[#24143035] focus-visible:outline focus-visible:outline-2\" style=\"outline-color:{{accent}}\"{{#if required}} required{{/if}}>\n <button type=\"submit\" class=\"mt-1.5 font-bold text-sm p-2.5 rounded-lg border-0 text-[#241430] cursor-pointer\" style=\"background:{{accent}}\">{{buttonLabel}}</button>\n</form>", "react": "export function FormElement({\n heading = \"{{heading}}\",\n buttonLabel = \"{{buttonLabel}}\",\n accent = \"{{accent}}\",\n required = {{required}},\n}) {\n return (\n <form onSubmit={(e) => e.preventDefault()} style={{ width: 280, boxSizing: \"border-box\", font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, border: \"1.5px solid #24143020\", display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n <h3 style={{ margin: \"0 0 4px\", fontSize: 17, fontWeight: 700 }}>{heading}</h3>\n <label htmlFor=\"frm-r-email\" style={{ fontSize: 12, fontWeight: 600, color: \"#241430aa\" }}>Email address</label>\n <input id=\"frm-r-email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\" required={required}\n style={{ font: \"14px system-ui, sans-serif\", padding: \"9px 11px\", borderRadius: 7, border: \"1.5px solid #24143035\", borderLeft: required ? `3px solid ${accent}` : \"1.5px solid #24143035\" }} />\n <button type=\"submit\" style={{ marginTop: 6, font: \"700 14px system-ui, sans-serif\", padding: 10, borderRadius: 8, border: \"none\", background: accent, color: \"#241430\", cursor: \"pointer\" }}>{buttonLabel}</button>\n </form>\n );\n}" }