Who owns the value
A controlled input takes its value from component state and reports changes through a handler, so the framework is the single source of truth. An uncontrolled input lets the dom hold the value, which you read later through a ref. The choice decides where the value lives.
- Controlled binds value to state and updates on change.
- Uncontrolled lets the dom keep the value internally.
- A ref reads an uncontrolled value when you need it.
Choosing between them
Controlled inputs make validation, formatting, and conditional logic straightforward because every keystroke flows through your code. Uncontrolled inputs need less wiring and suit simple forms or integration with non framework code.
- Use controlled when you must react to each change.
- Use uncontrolled for simple forms or file inputs.
- Never switch a single input between the two modes.
Switching an input from controlled to uncontrolled mid life triggers warnings and bugs, so pick one mode per field and keep it.
Key idea
Controlled inputs store the value in state for full control, while uncontrolled inputs leave it in the dom and read it through a ref.