Controlled Inputs
📚 What are Controlled Inputs? A controlled input is a form element where React state is the single source of truth for the value. You set value={state} and onChange updates the state. This is different from normal HTML where the DOM owns the value. Controlled inputs give you full control over vali…
Appy Says…
In React, form inputs need to be controlled — meaning React state is the single source of truth for what's in them. This feels different from plain HTML forms, but it gives you superpowers: real-time validation, instant submit handling, and no DOM queries.
What are Controlled Inputs?
A controlled input is an input whose value is driven by React state. Every keystroke updates state; state drives the input's displayed value — creating a tight loop.
- •
const [name, setName] = useState(''); - •
<input value={name} onChange={e => setName(e.target.value)} /> - •value = state; onChange = update state; re-render shows new value
- •Uncontrolled: input manages its own value (avoid in React)
- •
e.target.valuegives the current input content - •On submit: you already have all values in state — no DOM querying needed
Think of it like a Roblox text GUI linked to a DataStore
An uncontrolled input is like a text box that stores its own value locally — it works but you can't easily read it. A controlled input is like a text box synced to a DataStore — React always knows the current value and can validate/transform it instantly.
How It Works
- •1. Declare state for each field:
const [email, setEmail] = useState('') - •2. Bind:
value={email} onChange={e => setEmail(e.target.value)} - •3. Every keypress fires onChange → setEmail → re-render → input shows new value
- •4. On submit:
event.preventDefault()then use state values directly - •5. For checkboxes: use
checked+onChangeinstead ofvalue - •6. For multiple fields: one state object
const [form, setForm] = useState({name:'', email:''})
Real-World Examples
- •Login form: email + password state, validate on submit
- •Search bar: query state, filter results on every keypress
- •Live character counter:
{maxLength - text.length} characters left - •Applaa APPY tool builder: all fields are controlled inputs synced to a form state object
Key Facts
- •React Hook Form and Formik are libraries that optimise large forms by reducing re-renders
- •Controlled inputs enable instant validation (red border as user types wrong email format)
- •The
selectelement also uses controlled pattern:value={selected} onChange={...} - •Textarea in React:
<textarea value={text} onChange={...} />(self-closing unlike HTML)
Watch Out!
Mixing controlled and uncontrolled: if you set value={something} but forget onChange, the input becomes read-only and React shows a warning. You must always pair value with onChange for a controlled input.
Remember
value={state} + onChange={e => setState(e.target.value)} = controlled input. State is always the source of truth. On submit, read values from state — never from the DOM.
What You Learned
- •Controlled inputs: React state drives value; onChange updates state on every keystroke
- •Pair value + onChange; on submit use state values directly without DOM queries
- •Unlocks: real-time validation, instant feedback, complex multi-field forms
Key Facts
- →React Hook Form and Formik are libraries that optimise large forms by reducing re-renders
- →Controlled inputs enable instant validation (red border as user types wrong email format)
- →The
selectelement also uses controlled pattern:value={selected} onChange={...} - →Textarea in React:
<textarea value={text} onChange={...} />(self-closing unlike HTML)
Real-World Examples
Remember
value={state} + onChange={e => setState(e.target.value)} = controlled input. State is always the source of truth. On submit, read values from state — never from the DOM.
Quick Quiz
Controlled input value comes from?