Form

Collection of inputs used to submit information.

html

<form class="frm frm--stacked" novalidate>
  <h2 class="frm__title">Contact us</h2>
  <label class="frm__field">
    <span class="frm__label">Name</span>
    <input class="frm__input" type="text" name="name" autocomplete="name" style="border-radius:8px;" required>
  </label>
  <label class="frm__field">
    <span class="frm__label">Email</span>
    <input class="frm__input" type="email" name="email" autocomplete="email" style="border-radius:8px;" required>
  </label>
  <button class="frm__submit" type="submit" style="background:#241430;border-radius:8px;">Send message</button>
</form>
<style>
.frm { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
.frm--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: 480px; }
.frm__title { grid-column: 1 / -1; margin: 0 0 4px; font-size: 16px; }
.frm--inline .frm__title { width: 100%; }
.frm__field { display: block; flex: 1; min-width: 140px; }
.frm__label { display: block; margin-bottom: 6px; font-weight: 500; }
.frm__input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; }
.frm__input:focus-visible { outline: none; border-color: #241430; }
.frm__submit { padding: 10px 18px; border: none; color: #FAF7F2; font: inherit; font-weight: 600; cursor: pointer; }
.frm__submit:hover { filter: brightness(1.15); }
</style>

tailwind

<form novalidate class="frm-tw font-sans text-sm text-[#241430] max-w-sm flex flex-col gap-3 stacked-layout">
  <h2 class="text-base font-semibold m-0">Contact us</h2>
  <label class="block flex-1 min-w-[140px]">
    <span class="block mb-1.5 font-medium">Name</span>
    <input type="text" name="name" autocomplete="name" required class="w-full box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] focus-visible:outline-none focus-visible:border-[#241430]" style="border-radius:8px;">
  </label>
  <label class="block flex-1 min-w-[140px]">
    <span class="block mb-1.5 font-medium">Email</span>
    <input type="email" name="email" autocomplete="email" required class="w-full box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] focus-visible:outline-none focus-visible:border-[#241430]" style="border-radius:8px;">
  </label>
  <button type="submit" class="px-[18px] py-2.5 border-0 text-[#FAF7F2] font-semibold cursor-pointer hover:brightness-110" style="background:#241430;border-radius:8px;">Send message</button>
</form>
<style>
.frm-tw.inline-layout { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: 480px; }
</style>

react

export function Form({
  title = "Contact us",
  submitLabel = "Send message",
  accent = "#241430",
  layout = "stacked",
  radius = 8,
}) {
  const inputStyle = {
    width: "100%", boxSizing: "border-box", padding: "10px 12px", font: "inherit", color: "#241430",
    background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: radius,
  };
  return (
    <form noValidate style={{
      fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: layout === "inline" ? 480 : 320,
      display: "flex", flexDirection: layout === "inline" ? "row" : "column", flexWrap: "wrap", alignItems: layout === "inline" ? "flex-end" : "stretch", gap: 12,
    }}>
      <h2 style={{ margin: "0 0 4px", fontSize: 16, width: layout === "inline" ? "100%" : "auto" }}>{title}</h2>
      <label style={{ display: "block", flex: 1, minWidth: 140 }}>
        <span style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>Name</span>
        <input type="text" name="name" autoComplete="name" required style={inputStyle} />
      </label>
      <label style={{ display: "block", flex: 1, minWidth: 140 }}>
        <span style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>Email</span>
        <input type="email" name="email" autoComplete="email" required style={inputStyle} />
      </label>
      <button type="submit" style={{ padding: "10px 18px", border: "none", background: accent, color: "#FAF7F2", font: "inherit", fontWeight: 600, cursor: "pointer", borderRadius: radius }}>
        {submitLabel}
      </button>
    </form>
  );
}