Edit Form State

Name

Also known as (comma separated)

Brief definition Current form values/validation state.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "fieldLabel", "type": "text", "label": "Field label", "default": "Email" }, { "id": "fieldValue", "type": "text", "label": "Field value", "default": "ada@example" }, { "id": "status", "type": "select", "label": "Form state", "default": "invalid", "options": [ "pristine", "invalid", "valid" ] }, { "id": "accent", "type": "color", "label": "Valid colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fst fst--{{status}}\">\n <label class=\"fst__label\">{{fieldLabel}}</label>\n <input class=\"fst__input\" type=\"text\" value=\"{{fieldValue}}\" style=\"--ok:{{accent}};\" />\n <p class=\"fst__msg fst__msg--pristine\">Not yet edited</p>\n <p class=\"fst__msg fst__msg--invalid\">Enter a valid email address</p>\n <p class=\"fst__msg fst__msg--valid\" style=\"color:{{accent}};\">Looks good</p>\n</div>\n<style>\n.fst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.fst__label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }\n.fst__input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 6px; border: 2px solid #24143030; font-size: 13px; }\n.fst--invalid .fst__input { border-color: #E8A020; }\n.fst--valid .fst__input { border-color: var(--ok); }\n.fst__msg { display: none; margin: 6px 0 0; font-size: 11px; color: #24143099; }\n.fst--pristine .fst__msg--pristine, .fst--invalid .fst__msg--invalid, .fst--valid .fst__msg--valid { display: block; }\n.fst--invalid .fst__msg--invalid { color: #E8A020; font-weight: 600; }\n</style>", "tailwind": "<div class=\"fsttw fsttw--{{status}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\">\n <label class=\"block text-[11px] font-semibold mb-1\">{{fieldLabel}}</label>\n <input class=\"fsttw__input w-full box-border py-2.5 px-2.5 rounded-md border-2 border-[#24143030] text-[13px]\" type=\"text\" value=\"{{fieldValue}}\" style=\"--ok:{{accent}};\" />\n <p class=\"fsttw__msg fsttw__msg--pristine hidden mt-1.5 text-[11px] text-[#24143099]\">Not yet edited</p>\n <p class=\"fsttw__msg fsttw__msg--invalid hidden mt-1.5 text-[11px] text-[#E8A020] font-semibold\">Enter a valid email address</p>\n <p class=\"fsttw__msg fsttw__msg--valid hidden mt-1.5 text-[11px] font-semibold\" style=\"color:{{accent}};\">Looks good</p>\n</div>\n<style>\n.fsttw--invalid .fsttw__input { border-color: #E8A020; }\n.fsttw--valid .fsttw__input { border-color: var(--ok); }\n.fsttw--pristine .fsttw__msg--pristine, .fsttw--invalid .fsttw__msg--invalid, .fsttw--valid .fsttw__msg--valid { display: block; }\n</style>", "react": "export function FormState({\n fieldLabel = \"{{fieldLabel}}\",\n fieldValue = \"{{fieldValue}}\",\n status = \"{{status}}\",\n accent = \"{{accent}}\",\n}) {\n const borderColor = status === \"invalid\" ? \"#E8A020\" : status === \"valid\" ? accent : \"#24143030\";\n const msg = { pristine: [\"Not yet edited\", \"#24143099\"], invalid: [\"Enter a valid email address\", \"#E8A020\"], valid: [\"Looks good\", accent] }[status];\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 <label style={{ display: \"block\", fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{fieldLabel}</label>\n <input type=\"text\" defaultValue={fieldValue} readOnly style={{ width: \"100%\", boxSizing: \"border-box\", padding: \"9px 10px\", borderRadius: 6, border: `2px solid ${borderColor}`, fontSize: 13 }} />\n <p style={{ margin: \"6px 0 0\", fontSize: 11, fontWeight: status === \"pristine\" ? 400 : 600, color: msg[1] }}>{msg[0]}</p>\n </div>\n );\n}" }