output

Represents calculated/output information.

html

<form class="out-form" oninput="this.querySelector('output').value = Number(this.a.value) + Number(this.b.value)" style="--accent:#BFD9F2;">
  <div class="out-form__row"><input class="out-form__num" name="a" type="number" value="12"> + <input class="out-form__num" name="b" type="number" value="8"> =
    <output class="out-el" name="result" for="a b">128</output>
  </div>
  <p class="out-form__hint">The real <code>&lt;output&gt;</code> recalculates live as you edit the inputs.</p>
</form>
<script>(function () { var f = document.querySelector(".out-form"); if (f) f.querySelector("output").value = Number(f.a.value) + Number(f.b.value); })();</script>
<style>
.out-form { width: 320px; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.out-form__row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.out-form__num { width: 54px; font: 14px system-ui, sans-serif; padding: 6px 8px; border-radius: 6px; border: 1.5px solid #24143030; }
.out-el { font-weight: 800; color: var(--accent); font-size: 18px; }
.out-form__hint { margin: 12px 0 0; font-size: 12px; color: #24143088; }
.out-form__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<form oninput="this.querySelector('output').value = Number(this.a.value) + Number(this.b.value)" class="w-[320px] box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl">
  <div class="flex items-center gap-2 font-semibold">
    <input name="a" type="number" value="12" class="w-[54px] text-sm px-2 py-1.5 rounded-md border-[1.5px] border-[#24143030]"> +
    <input name="b" type="number" value="8" class="w-[54px] text-sm px-2 py-1.5 rounded-md border-[1.5px] border-[#24143030]"> =
    <output name="result" for="a b" class="font-extrabold text-lg" style="color:#BFD9F2">128</output>
  </div>
  <p class="m-0 mt-3 text-xs text-[#241430]/55">The real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;output&gt;</code> recalculates live as you edit the inputs.</p>
</form>
<script>(function () { var f = document.querySelector("form"); if (f) f.querySelector("output").value = Number(f.a.value) + Number(f.b.value); })();</script>

react

import { useState } from "react";

export function OutputElement({
  a: initialA = 12,
  b: initialB = 8,
  accent = "#BFD9F2",
  showFormula = true,
}) {
  const [a, setA] = useState(initialA);
  const [b, setB] = useState(initialB);
  return (
    <form style={{ width: 320, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 600 }}>
        <input type="number" value={a} onChange={(e) => setA(Number(e.target.value))}
          style={{ width: 54, font: "14px system-ui, sans-serif", padding: "6px 8px", borderRadius: 6, border: "1.5px solid #24143030" }} /> +
        <input type="number" value={b} onChange={(e) => setB(Number(e.target.value))}
          style={{ width: 54, font: "14px system-ui, sans-serif", padding: "6px 8px", borderRadius: 6, border: "1.5px solid #24143030" }} /> =
        <output htmlFor="a b" style={{ fontWeight: 800, color: accent, fontSize: 18 }}>{a + b}</output>
      </div>
      {showFormula && <p style={{ margin: "12px 0 0", fontSize: 12, color: "#24143088" }}>The real <code>&lt;output&gt;</code> recalculates live as you edit the inputs.</p>}
    </form>
  );
}