Hidden Input

Input not visibly rendered.

html

<form class="hi">
  <p class="hi__note">Security token carried invisibly with the form:</p>
  <div class="hi__demo" style="--accent:#F5C2E0;"><code>&lt;input type="hidden" name="csrf_token" value="a1b2c3d4e5"&gt;</code></div>
  <input type="hidden" name="csrf_token" value="a1b2c3d4e5">
  <button class="hi__submit" type="submit">Submit form</button>
</form>
<style>
.hi { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; }
.hi__note { margin: 0 0 8px; font-size: 13px; color: #24143099; }
.hi__demo { margin-bottom: 10px; padding: 8px 10px; border: 1.5px dashed var(--accent); border-radius: 8px; background: #FAF7F2; overflow-x: auto; }
.hi__demo code { font-size: 12px; font-family: ui-monospace, monospace; white-space: pre; }
.hi__submit { padding: 9px 16px; border: none; border-radius: 8px; background: #241430; color: #FAF7F2; font: inherit; font-weight: 600; cursor: pointer; }
.hi__submit:hover { filter: brightness(1.15); }
</style>

tailwind

<form class="font-sans text-sm text-[#241430] max-w-[320px]">
  <p class="m-0 mb-2 text-[13px] text-[#24143099]">Security token carried invisibly with the form:</p>
  <div class="mb-2.5 px-2.5 py-2 border-[1.5px] border-dashed rounded-lg bg-[#FAF7F2] overflow-x-auto" style="border-color:#F5C2E0;"><code class="text-xs font-mono whitespace-pre">&lt;input type="hidden" name="csrf_token" value="a1b2c3d4e5"&gt;</code></div>
  <input type="hidden" name="csrf_token" value="a1b2c3d4e5">
  <button type="submit" class="px-4 py-2.5 border-0 rounded-lg bg-[#241430] text-[#FAF7F2] font-semibold cursor-pointer hover:brightness-110">Submit form</button>
</form>

react

export function HiddenInput({
  name = "csrf_token",
  value = "a1b2c3d4e5",
  purpose = "Security token",
  reveal = true,
  accent = "#F5C2E0",
}) {
  return (
    <form style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 320 }}>
      <p style={{ margin: "0 0 8px", fontSize: 13, color: "#24143099" }}>{purpose} carried invisibly with the form:</p>
      {reveal && (
        <div style={{ marginBottom: 10, padding: "8px 10px", border: `1.5px dashed ${accent}`, borderRadius: 8, background: "#FAF7F2", overflowX: "auto" }}>
          <code style={{ fontSize: 12, fontFamily: "ui-monospace, monospace", whiteSpace: "pre" }}>
            {`<input type="hidden" name="${name}" value="${value}">`}
          </code>
        </div>
      )}
      <input type="hidden" name={name} value={value} />
      <button type="submit" style={{ padding: "9px 16px", border: "none", borderRadius: 8, background: "#241430", color: "#FAF7F2", font: "inherit", fontWeight: 600, cursor: "pointer" }}>
        Submit form
      </button>
    </form>
  );
}