form

Form containing user input controls.

html

<form class="frm" style="--accent:#F5C2E0;" onsubmit="return false">
  <h3 class="frm__heading">Join the waitlist</h3>
  <label class="frm__label" for="frm-email">Email address</label>
  <input class="frm__input" id="frm-email" name="email" type="email" placeholder="you@example.com" required>
  <button class="frm__submit" type="submit">Notify me</button>
</form>
<style>
.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; }
.frm__heading { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.frm__label { font-size: 12px; font-weight: 600; color: #241430aa; }
.frm__input { font: 14px system-ui, sans-serif; padding: 9px 11px; border-radius: 7px; border: 1.5px solid #24143035; }
.frm__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.frm__input:required { border-left: 3px solid var(--accent); }
.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; }
</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">
  <h3 class="m-0 mb-1 text-[17px] font-bold">Join the waitlist</h3>
  <label class="text-xs font-semibold text-[#241430]/65" for="frm-tw-email">Email address</label>
  <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:#F5C2E0" required>
  <button type="submit" class="mt-1.5 font-bold text-sm p-2.5 rounded-lg border-0 text-[#241430] cursor-pointer" style="background:#F5C2E0">Notify me</button>
</form>

react

export function FormElement({
  heading = "Join the waitlist",
  buttonLabel = "Notify me",
  accent = "#F5C2E0",
  required = true,
}) {
  return (
    <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 }}>
      <h3 style={{ margin: "0 0 4px", fontSize: 17, fontWeight: 700 }}>{heading}</h3>
      <label htmlFor="frm-r-email" style={{ fontSize: 12, fontWeight: 600, color: "#241430aa" }}>Email address</label>
      <input id="frm-r-email" name="email" type="email" placeholder="you@example.com" required={required}
        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" }} />
      <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>
    </form>
  );
}