Edit Password Reset · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"preset\" data-stage=\"{{stage}}\" style=\"--accent:{{accent}};\">\n  <h3 class=\"preset__heading\">{{heading}}</h3>\n  <div class=\"preset__request\">\n    <p class=\"preset__copy\">Enter your email and we’ll send a link to reset your password.</p>\n    <label class=\"preset__field\">\n      <span class=\"preset__label\">Email</span>\n      <input type=\"email\" value=\"{{email}}\" autocomplete=\"username\" />\n    </label>\n    <button type=\"submit\" class=\"preset__submit\">Send reset link</button>\n  </div>\n  <div class=\"preset__sent\">\n    <p class=\"preset__copy\">If an account exists for {{email}}, a reset link is on its way.</p>\n    <label class=\"preset__field\">\n      <span class=\"preset__label\">New password</span>\n      <div class=\"preset__pwrap\">\n        <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" autocomplete=\"new-password\" />\n        <button type=\"button\" class=\"preset__toggle\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show new password\">{{#if showPassword}}Hide{{/if}}{{#unless showPassword}}Show{{/unless}}</button>\n      </div>\n    </label>\n    <button type=\"submit\" class=\"preset__submit\">Set new password</button>\n  </div>\n</div>\n<style>\n.preset { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }\n.preset__heading { margin: 0 0 10px; font-size: 16px; }\n.preset__copy { margin: 0 0 14px; font-size: 13px; color: #24143099; }\n.preset__field { display: block; margin-bottom: 14px; }\n.preset__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }\n.preset input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }\n.preset__pwrap { position: relative; }\n.preset__pwrap input { padding-right: 56px; }\n.preset__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #241430; font-weight: 700; font-size: 12px; padding: 4px 6px; }\n.preset__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; }\n.preset__request, .preset__sent { display: none; }\n.preset[data-stage=\"Request\"] .preset__request { display: block; }\n.preset[data-stage=\"Sent\"] .preset__sent { display: block; }\n</style>",
  "tailwind": "<div class=\"w-[300px] p-5 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] preset-tw\" data-stage=\"{{stage}}\">\n  <h3 class=\"m-0 mb-2.5 text-base\">{{heading}}</h3>\n  <div class=\"preset-tw-request\">\n    <p class=\"m-0 mb-3.5 text-[13px] text-[#241430]/60\">Enter your email and we’ll send a link to reset your password.</p>\n    <label class=\"block mb-3.5\">\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    <button type=\"submit\" class=\"w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]\" style=\"background:{{accent}}\">Send reset link</button>\n  </div>\n  <div class=\"preset-tw-sent\">\n    <p class=\"m-0 mb-3.5 text-[13px] text-[#241430]/60\">If an account exists for {{email}}, a reset link is on its way.</p>\n    <label class=\"block mb-3.5\">\n      <span class=\"block mb-1 font-semibold text-[13px]\">New 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-14 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]\" />\n        <button type=\"button\" class=\"absolute right-1.5 top-1/2 -translate-y-1/2 border-none bg-transparent cursor-pointer text-[#241430] font-bold text-xs px-1.5 py-1\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show new password\">{{#if showPassword}}Hide{{/if}}{{#unless showPassword}}Show{{/unless}}</button>\n      </div>\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}}\">Set new password</button>\n  </div>\n</div>\n<style>\n.preset-tw-request, .preset-tw-sent { display: none; }\n[data-stage=\"Request\"] .preset-tw-request { display: block; }\n[data-stage=\"Sent\"] .preset-tw-sent { display: block; }\n</style>",
  "react": "export function PasswordReset({\n  heading = \"{{heading}}\",\n  stage = \"{{stage}}\",\n  email = \"{{email}}\",\n  showPassword = {{showPassword}},\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  const submitStyle = { width: \"100%\", padding: 10, borderRadius: 8, border: \"none\", background: accent, color: \"#14351f\", fontWeight: 700, cursor: \"pointer\" };\n  return (\n    <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: 20, borderRadius: 14, boxSizing: \"border-box\", border: \"1px solid #24143018\" }}>\n      <h3 style={{ margin: \"0 0 10px\", fontSize: 16 }}>{heading}</h3>\n      {stage === \"Request\" ? (\n        <div>\n          <p style={{ margin: \"0 0 14px\", fontSize: 13, color: \"#24143099\" }}>Enter your email and we’ll send a link to reset your password.</p>\n          <label style={{ display: \"block\", marginBottom: 14 }}>\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          <button type=\"submit\" style={submitStyle}>Send reset link</button>\n        </div>\n      ) : (\n        <div>\n          <p style={{ margin: \"0 0 14px\", fontSize: 13, color: \"#24143099\" }}>If an account exists for {email}, a reset link is on its way.</p>\n          <label style={{ display: \"block\", marginBottom: 14 }}>\n            <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>New password</span>\n            <div style={{ position: \"relative\" }}>\n              <input type={showPassword ? \"text\" : \"password\"} autoComplete=\"new-password\" style={{ ...inputStyle, paddingRight: 56 }} />\n              <button type=\"button\" aria-pressed={showPassword} aria-label=\"Show new password\"\n                style={{ position: \"absolute\", right: 6, top: \"50%\", transform: \"translateY(-50%)\", border: \"none\", background: \"none\", cursor: \"pointer\", color: \"#241430\", fontWeight: 700, fontSize: 12, padding: \"4px 6px\" }}>\n                {showPassword ? \"Hide\" : \"Show\"}\n              </button>\n            </div>\n          </label>\n          <button type=\"submit\" style={submitStyle}>Set new password</button>\n        </div>\n      )}\n    </div>\n  );\n}"
}