Controlled Components

Learning objectives#

• Explain controlled vs uncontrolled inputs
• Format or restrict input while typing
• Use defaultValue and refs for uncontrolled inputs
• Build reusable controlled components

Explanation#

Controlled: <input value={text} onChange={e => setText(e.target.value)} />. React state is the single source of truth; the input always shows state.

Because every keystroke goes through your handler, you can transform it (upper-case a PAN number, strip non-digits from a phone) or reject it.

Uncontrolled: <input defaultValue="Asha" /> — the DOM keeps the value; read it on submit (FormData or a ref). Simpler, but you cannot react to every change.

Never switch an input between controlled and uncontrolled: value={undefined} → value="text" triggers a React warning. Initialise state to "" rather than undefined.

Your own components can be controlled too: a QuantityPicker with value and onChange props works like a native input.

Syntax#

1<input value={phone} onChange={e => setPhone(e.target.value.replace(/\D/g, ''))} />   // controlled
2<input name="city" defaultValue="Pune" />                                              // uncontrolled

Code example: Formatting inputs and a reusable controlled picker#

1import { useState } from 'react';
2

3function QuantityPicker({ value, onChange, min = 1, max = 10 }) {
4  return (
5    <span>
6      <button type="button" onClick={() => onChange(Math.max(min, value - 1))} aria-label="Decrease">−</button>
7      <output aria-live="polite"> {value} </output>
8      <button type="button" onClick={() => onChange(Math.min(max, value + 1))} aria-label="Increase">+</button>
9    </span>
10  );
11}
12

13export default function Checkout() {
14  const [phone, setPhone] = useState('');
15  const [pan, setPan] = useState('');
16  const [qty, setQty] = useState(1);
17

18  return (
19    <form>
20      <label>
21        Phone
22        <input
23          value={phone}
24          onChange={e => setPhone(e.target.value.replace(/\D/g, '').slice(0, 10))}
25          inputMode="numeric"
26        />
27      </label>
28      <label>
29        PAN
30        <input value={pan} onChange={e => setPan(e.target.value.toUpperCase())} maxLength={10} />
31      </label>
32      <label>Quantity <QuantityPicker value={qty} onChange={setQty} /></label>
33      <label>City (uncontrolled) <input name="city" defaultValue="Pune" /></label>
34      <p>Phone: {phone || '–'} · PAN: {pan || '–'} · Qty: {qty}</p>
35    </form>
36  );
37}

Typing “98-765 43210 99” into Phone shows only “9876543210” (digits, max 10). Typing “abcde1234f” into PAN shows “ABCDE1234F”. The −/+ buttons change the quantity between 1 and 10. The City field keeps its own value and starts as “Pune”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Phone is controlled: the handler strips non-digits and limits to 10 characters before storing.
2. PAN is upper-cased on every keystroke.
3. QuantityPicker is a controlled custom component: value in, onChange out, clamped to min/max.
4. City is uncontrolled: defaultValue sets the starting value and the DOM manages it.

Real-world use case#

Common mistakes#

Best practices#

• Controlled for fields with live formatting or validation
• Uncontrolled + FormData for simple forms
• Initialise text state with ""
• Give custom inputs a value/onChange API

Remember this#

Practice exercise#

1import { useState } from 'react';
2

3export default function AmountInput() {
4  const [amount, setAmount] = useState('');
5  return (
6    <>
7      <input
8        value={amount}
9        onChange={e => { if (/^\d*\.?\d*$/.test(e.target.value)) setAmount(e.target.value); }}
10        inputMode="decimal"
11        aria-label="Amount"
12      />
13      <p>₹{amount || '0'}</p>
14    </>
15  );
16}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.