Controlled vs Uncontrolled Inputs (Intro)
Understand the difference between controlled inputs (value bound to state) and uncontrolled inputs (DOM manages value).
Controlled vs Uncontrolled Inputs (Intro) is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Overview
Goal: Compare controlled vs uncontrolled inputs. Controlled use React state as the source of truth; uncontrolled leave it to the DOM.
Controlled inputs
Controlled inputs: the value is tied to state, updated onChange. React always knows the latest value.
Demo: controlled input
This input is controlled: value is from state, updated on each change.
<div id="root"></div>
Uncontrolled inputs
Uncontrolled inputs: the DOM keeps its own value; you can read it with refs only when needed.
Demo: uncontrolled input
Here the input is uncontrolled: React does not manage value; we read it with a ref when clicking the button.
<div id="root"></div>
Tips & trade-offs
Tips:
- Controlled = predictable, React state drives UI.
- Uncontrolled = simpler, but less control.
- Controlled preferred for forms.
Controlled input check
Recap
Recap: Controlled inputs bind to React state for reliability. Uncontrolled inputs let the DOM manage values. Choose controlled for most forms.
Frequently asked questions
Is the “Controlled vs Uncontrolled Inputs (Intro)” lesson free?
Yes — the full text of “Controlled vs Uncontrolled Inputs (Intro)” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Controlled vs Uncontrolled Inputs (Intro)”?
Understand the difference between controlled inputs (value bound to state) and uncontrolled inputs (DOM manages value). You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Controlled vs Uncontrolled Inputs (Intro)” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- useState Basics & Correct Updates
- Event Handling: onClick & onChange
- Controlled vs Uncontrolled Inputs (Intro)