Edit Login

Name

Also known as (comma separated)

Brief definition Authentication interface.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Sign in" }, { "id": "email", "type": "text", "label": "Email value", "default": "jamie@example.com" }, { "id": "showPassword", "type": "toggle", "label": "Reveal password", "default": false }, { "id": "remember", "type": "toggle", "label": "Remember me checked", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"login\" style=\"--accent:{{accent}};\">\n <h2 class=\"login__heading\">{{heading}}</h2>\n <label class=\"login__field\">\n <span class=\"login__label\">Email</span>\n <input type=\"email\" name=\"email\" value=\"{{email}}\" autocomplete=\"username\" />\n </label>\n <label class=\"login__field\">\n <span class=\"login__label\">Password</span>\n <div class=\"login__pwrap\">\n <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" name=\"password\" autocomplete=\"current-password\" />\n <button type=\"button\" class=\"login__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 </label>\n <label class=\"login__remember\">\n <input type=\"checkbox\" {{#if remember}}checked{{/if}} />\n Remember me\n </label>\n <button type=\"submit\" class=\"login__submit\">{{heading}}</button>\n</form>\n<style>\n.login { 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.login__heading { margin: 0 0 16px; font-size: 18px; }\n.login__field { display: block; margin-bottom: 14px; }\n.login__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }\n.login input[type=\"email\"], .login input[type=\"password\"], .login input[type=\"text\"] { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }\n.login__pwrap { position: relative; }\n.login__pwrap input { padding-right: 36px; }\n.login__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #24143099; padding: 6px; border-radius: 6px; }\n.login__toggle:focus-visible { outline: 2px solid var(--accent); }\n.login__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 16px; }\n.login__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #FAF7F2; font-weight: 700; cursor: pointer; }\n.login__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.5\">\n <span class=\"block mb-1 font-semibold text-[13px]\">Email</span>\n <input type=\"email\" name=\"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.5\">\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}}\" name=\"password\" autocomplete=\"current-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 focus-visible:outline focus-visible:outline-2\" style=\"outline-color:{{accent}}\" 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 </label>\n <label class=\"flex items-center gap-2 text-[13px] mb-4\">\n <input type=\"checkbox\" {{#if remember}}checked{{/if}} />\n Remember me\n </label>\n <button type=\"submit\" class=\"w-full py-2.5 rounded-lg border-none text-[#FAF7F2] font-bold cursor-pointer\" style=\"background:{{accent}}\">{{heading}}</button>\n</form>", "react": "export function Login({\n heading = \"{{heading}}\",\n email = \"{{email}}\",\n showPassword = {{showPassword}},\n remember = {{remember}},\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: 14 }}>\n <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Email</span>\n <input type=\"email\" name=\"email\" defaultValue={email} autoComplete=\"username\" style={inputStyle} />\n </label>\n <label style={{ display: \"block\", marginBottom: 14 }}>\n <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Password</span>\n <div style={{ position: \"relative\" }}>\n <input type={showPassword ? \"text\" : \"password\"} name=\"password\" autoComplete=\"current-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 </label>\n <label style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontSize: 13, marginBottom: 16 }}>\n <input type=\"checkbox\" defaultChecked={remember} />\n Remember me\n </label>\n <button type=\"submit\" style={{ width: \"100%\", padding: 10, borderRadius: 8, border: \"none\", background: accent, color: \"#FAF7F2\", fontWeight: 700, cursor: \"pointer\" }}>{heading}</button>\n </form>\n );\n}" }