Controlled Component

Parent controls component state.

Parent state: Ada

Typing is blocked — only the parent's state can change this value.

html

<div class="ctrld">
  <div class="ctrld__parent">Parent state: <code>Ada</code></div>
  <span class="ctrld__arrow" aria-hidden="true">value=&quot;Ada&quot; &darr;</span>
  <label class="ctrld__label">Name</label>
  <input class="ctrld__input" style="border-color:#241430;" type="text" value="Ada" disabled />
  <p class="ctrld__note">Typing is blocked &mdash; only the parent's state can change this value.</p>
</div>
<style>
.ctrld { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.ctrld__parent { padding: 10px; border-radius: 8px; background: #24143010; font-size: 12px; margin-bottom: 4px; }
.ctrld__parent code { font: 11px ui-monospace, monospace; }
.ctrld__arrow { display: block; text-align: center; font-size: 10px; color: #24143080; margin-bottom: 8px; }
.ctrld__label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.ctrld__input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid; border-radius: 6px; font-size: 13px; background: #ffffff; color: #241430; }
.ctrld__input:disabled { background: #24143008; cursor: not-allowed; opacity: .7; }
.ctrld__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">
  <div class="p-2.5 rounded-lg bg-[#24143010] text-xs mb-1">Parent state: <code class="font-mono text-[11px]">Ada</code></div>
  <span class="block text-center text-[10px] text-[#24143080] mb-2" aria-hidden="true">value=&quot;Ada&quot; &darr;</span>
  <label class="block text-[11px] font-semibold mb-1">Name</label>
  <input class="w-full box-border py-2 px-2.5 border-2 rounded-md text-[13px] bg-white text-[#241430] disabled:bg-[#24143008] disabled:cursor-not-allowed disabled:opacity-70" style="border-color:#241430;" type="text" value="Ada" disabled />
  <p class="mt-2 text-[10px] text-[#24143099]">Typing is blocked &mdash; only the parent's state can change this value.</p>
</div>

react

export function ControlledComponent({
  inputLabel = "Name",
  parentState = "Ada",
  locked = true,
  accent = "#241430",
}) {
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <div style={{ padding: 10, borderRadius: 8, background: "#24143010", fontSize: 12, marginBottom: 4 }}>Parent state: <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 11 }}>{parentState}</code></div>
      <span style={{ display: "block", textAlign: "center", fontSize: 10, color: "#24143080", marginBottom: 8 }}>value="{parentState}" &darr;</span>
      <label style={{ display: "block", fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{inputLabel}</label>
      <input type="text" value={parentState} readOnly disabled={locked}
        style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: `2px solid ${accent}`, borderRadius: 6, fontSize: 13, background: locked ? "#24143008" : "#ffffff", color: "#241430", opacity: locked ? .7 : 1 }} />
      {locked && <p style={{ margin: "8px 0 0", fontSize: 10, color: "#24143099" }}>Typing is blocked &mdash; only the parent's state can change this value.</p>}
    </div>
  );
}