Uncontrolled Component

Component manages its own state.

Editable freely — the DOM node owns this value. A parent can only read it later via a ref.

html

<div class="unctrl">
  <label class="unctrl__label">Nickname</label>
  <input class="unctrl__input" style="border-color:#A8E6C1;" type="text" value="Ada" placeholder="Ada" />
  <p class="unctrl__note">Editable freely &mdash; the DOM node owns this value. A parent can only read it later via a ref.</p>
</div>
<style>
.unctrl { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.unctrl__label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.unctrl__input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid; border-radius: 6px; font-size: 13px; background: #ffffff; color: #241430; }
.unctrl__note { margin: 8px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <label class="block text-[11px] font-semibold mb-1">Nickname</label>
  <input class="w-full box-border py-2 px-2.5 border-2 rounded-md text-[13px] bg-white text-[#241430]" style="border-color:#A8E6C1;" type="text" value="Ada" placeholder="Ada" />
  <p class="mt-2 text-[10px] text-[#24143099]">Editable freely &mdash; the DOM node owns this value. A parent can only read it later via a ref.</p>
</div>

react

export function UncontrolledComponent({
  inputLabel = "Nickname",
  defaultValue = "Ada",
  showRefNote = true,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <label style={{ display: "block", fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{inputLabel}</label>
      <input type="text" defaultValue={defaultValue}
        style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: `2px solid ${accent}`, borderRadius: 6, fontSize: 13, background: "#ffffff", color: "#241430" }} />
      <p style={{ margin: "8px 0 0", fontSize: 10, color: "#24143099" }}>Editable freely &mdash; the DOM node owns this value.{showRefNote && " A parent can only read it later via a ref."}</p>
    </div>
  );
}