Controlled Inputs

Written by Swapnil RajaPublished 29 Aug 2026

A controlled input has no memory of its own. React state is the value, and typing is just a request to change that state.

The loop

Two props make an input controlled: value reads from state, and onChange writes back to it. Remove either and the input misbehaves in a specific, recognisable way.

Value in, change out

jsx

function NameField() {
  const [name, setName] = React.useState("")

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Type your name"
      />
      <p>State holds: "{name}"</p>
      <button onClick={() => setName("")}>Clear</button>{" "}
      <button onClick={() => setName("Ada")}>Set to Ada</button>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<NameField />)

PreviousKeys Explained NextForm Submission and Validation

Three inputs, one works

jsx

function Inputs() {
  const [text, setText] = React.useState("start")

  return (
    <div style={{ display: "grid", gap: 8, maxWidth: 320 }}>
      {/* Frozen: value with no way to change it */}
      <label>
        Frozen: <input value={text} readOnly />
      </label>

      {/* Uncontrolled: React does not track it at all */}
      <label>
        Uncontrolled: <input defaultValue={text} />
      </label>

      {/* Controlled: value and onChange */}
      <label>
        Controlled: <input value={text} onChange={(e) => setText(e.target.value)} />
      </label>

      <p>State: "{text}"</p>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Inputs />)

Every type in one form

jsx

function AllTypes() {
  const [form, setForm] = React.useState({
    name: "", agreed: false, plan: "free", size: "m",
  })

  const update = (field, value) => setForm((f) => ({ ...f, [field]: value }))

  return (
    <div style={{ display: "grid", gap: 8, maxWidth: 340 }}>
      <input value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="Name" />

      <label>
        <input type="checkbox" checked={form.agreed} onChange={(e) => update("agreed", e.target.checked)} />
        {" "}Agree to terms
      </label>

      <div>
        {["free", "paid"].map((plan) => (
          <label key={plan} style={{ marginRight: 10 }}>
            <input
              type="radio"
              checked={form.plan === plan}
              onChange={() => update("plan", plan)}
            />{" "}
            {plan}
          </label>
        ))}
      </div>

      <select value={form.size} onChange={(e) => update("size", e.target.value)}>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>

      <pre style={{ background: "#f1f5f9", padding: 8 }}>{JSON.stringify(form, null, 2)}</pre>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<AllTypes />)

Unique ids without a counter

jsx

function Field({ label }) {
  const id = React.useId()

  return (
    <p>
      <label htmlFor={id}>{label}</label>{" "}
      <input id={id} />
    </p>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <div>
    <Field label="First name" />
    <Field label="Last name" />
    <p style={{ color: "#64748b" }}>
      Two instances, two different ids — click either label to focus its own input.
    </p>
  </div>
)

Controlled Inputs

The loop

The read-only mistake

Each input type

useId for label associations

Never start from undefined