Edit Registration · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<form class=\"reg\" style=\"--accent:{{accent}};\">\n  <h2 class=\"reg__heading\">{{heading}}</h2>\n  <label class=\"reg__field\">\n    <span class=\"reg__label\">Email</span>\n    <input type=\"email\" value=\"{{email}}\" autocomplete=\"username\" />\n  </label>\n  <label class=\"reg__field\">\n    <span class=\"reg__label\">Password</span>\n    <div class=\"reg__pwrap\">\n      <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" autocomplete=\"new-password\" />\n      <button type=\"button\" class=\"reg__toggle\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show password\">{{#if showPassword}}<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M2 2l12 12\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>{{/if}}{{#unless showPassword}}<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>{{/unless}}</button>\n    </div>\n    <span class=\"reg__hint\">At least 8 characters, no need to include symbols.</span>\n  </label>\n  <label class=\"reg__terms\">\n    <input type=\"checkbox\" {{#if termsAccepted}}checked{{/if}} />\n    I agree to the Terms and Privacy Policy\n  </label>\n  <button type=\"submit\" class=\"reg__submit\">Create account</button>\n</form>\n<style>\n.reg { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 22px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }\n.reg__heading { margin: 0 0 16px; font-size: 18px; }\n.reg__field { display: block; margin-bottom: 12px; }\n.reg__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }\n.reg input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }\n.reg__pwrap { position: relative; }\n.reg__pwrap input { padding-right: 36px; }\n.reg__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #24143099; padding: 6px; border-radius: 6px; }\n.reg__hint { display: block; margin-top: 5px; font-size: 11px; color: #24143088; }\n.reg__terms { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; margin: 14px 0 16px; line-height: 1.4; }\n.reg__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; }\n.reg__toggle:focus-visible, .reg__submit:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>",
  "tailwind": "<form class=\"w-[300px] p-[22px] rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]\">\n  <h2 class=\"m-0 mb-4 text-lg\">{{heading}}</h2>\n  <label class=\"block mb-3\">\n    <span class=\"block mb-1 font-semibold text-[13px]\">Email</span>\n    <input type=\"email\" value=\"{{email}}\" autocomplete=\"username\" class=\"w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]\" />\n  </label>\n  <label class=\"block mb-3\">\n    <span class=\"block mb-1 font-semibold text-[13px]\">Password</span>\n    <div class=\"relative\">\n      <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" autocomplete=\"new-password\" class=\"w-full box-border px-2.5 py-2 pr-9 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]\" />\n      <button type=\"button\" class=\"absolute right-1 top-1/2 -translate-y-1/2 border-none bg-transparent cursor-pointer text-[#241430]/60 p-1.5 rounded-md\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show password\">{{#if showPassword}}<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M2 2l12 12\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>{{/if}}{{#unless showPassword}}<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/></svg>{{/unless}}</button>\n    </div>\n    <span class=\"block mt-1 text-[11px] text-[#241430]/50\">At least 8 characters, no need to include symbols.</span>\n  </label>\n  <label class=\"flex items-start gap-2 text-xs my-3.5 leading-snug\">\n    <input type=\"checkbox\" {{#if termsAccepted}}checked{{/if}} />\n    I agree to the Terms and Privacy Policy\n  </label>\n  <button type=\"submit\" class=\"w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]\" style=\"background:{{accent}}\">Create account</button>\n</form>",
  "react": "export function Registration({\n  heading = \"{{heading}}\",\n  email = \"{{email}}\",\n  showPassword = {{showPassword}},\n  termsAccepted = {{termsAccepted}},\n  accent = \"{{accent}}\",\n}) {\n  const inputStyle = { width: \"100%\", boxSizing: \"border-box\", padding: \"9px 10px\", borderRadius: 8, border: \"1.5px solid #24143030\", font: \"inherit\" };\n  return (\n    <form style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: 22, borderRadius: 14, boxSizing: \"border-box\", border: \"1px solid #24143018\" }}>\n      <h2 style={{ margin: \"0 0 16px\", fontSize: 18 }}>{heading}</h2>\n      <label style={{ display: \"block\", marginBottom: 12 }}>\n        <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Email</span>\n        <input type=\"email\" defaultValue={email} autoComplete=\"username\" style={inputStyle} />\n      </label>\n      <label style={{ display: \"block\", marginBottom: 12 }}>\n        <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Password</span>\n        <div style={{ position: \"relative\" }}>\n          <input type={showPassword ? \"text\" : \"password\"} autoComplete=\"new-password\" style={{ ...inputStyle, paddingRight: 36 }} />\n          <button type=\"button\" aria-pressed={showPassword} aria-label=\"Show password\"\n            style={{ position: \"absolute\", right: 4, top: \"50%\", transform: \"translateY(-50%)\", border: \"none\", background: \"none\", cursor: \"pointer\", color: \"#24143099\", padding: 6, borderRadius: 6 }}>\n            {showPassword\n              ? <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" /><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" /><path d=\"M2 2l12 12\" stroke=\"currentColor\" strokeWidth=\"1.3\" /></svg>\n              : <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 8s2.6-4.5 7-4.5S15 8 15 8s-2.6 4.5-7 4.5S1 8 1 8Z\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" /><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" /></svg>}\n          </button>\n        </div>\n        <span style={{ display: \"block\", marginTop: 5, fontSize: 11, color: \"#24143088\" }}>At least 8 characters, no need to include symbols.</span>\n      </label>\n      <label style={{ display: \"flex\", alignItems: \"flex-start\", gap: 8, fontSize: 12, margin: \"14px 0 16px\", lineHeight: 1.4 }}>\n        <input type=\"checkbox\" defaultChecked={termsAccepted} />\n        I agree to the Terms and Privacy Policy\n      </label>\n      <button type=\"submit\" style={{ width: \"100%\", padding: 10, borderRadius: 8, border: \"none\", background: accent, color: \"#14351f\", fontWeight: 700, cursor: \"pointer\" }}>Create account</button>\n    </form>\n  );\n}"
}