A controlled input in React means…

Options

1. The DOM holds the value, which is read with a ref
2. React state is the truth, via value and onChange (Correct option)
3. The input is disabled so users cannot type in it
4. The value is kept in the browser's localStorage

Answer

React state is the single source of truth via value + onChange

Why

In a controlled input, React state holds the value: <input value={name} onChange={e => setName(e.target.value)} />. Every keystroke updates state, and state decides what is shown.

This lets you validate or format as the user types.

An uncontrolled input keeps its own value in the DOM and you read it with a ref when needed.

const [name, setName] = useState("");
<input value={name} onChange={e => setName(e.target.value)} />

Remember

Controlled = React state drives the input.

Key terms

• Controlled input
• State (UI)
• React
• DOM
• useState