ReactJS Controlled Component

Last modified on: September 7, 2025

<h1 data-start="402" data-end="437"><strong data-start="404" data-end="437">ReactJS Controlled Components</strong></h1>
<p data-start="439" data-end="599">In <strong data-start="442" data-end="453">ReactJS</strong>, a <strong data-start="457" data-end="481">controlled component</strong> is a form input element (like <code data-start="512" data-end="521">&lt;input&gt;</code>, <code data-start="523" data-end="535">&lt;textarea&gt;</code>, or <code data-start="540" data-end="550">&lt;select&gt;</code>) whose <strong data-start="558" data-end="596">value is controlled by React state</strong>.</p>
<p data-start="601" data-end="785">This means the <strong data-start="616" data-end="635">source of truth</strong> for the input&rsquo;s value is React&rsquo;s <code data-start="669" data-end="676">state</code>, not the DOM. Whenever a user types something, React updates the state, and the input reflects that state.</p>
<hr data-start="787" data-end="790" />
<h2 data-start="792" data-end="824"><strong data-start="795" data-end="824">1. Basic Controlled Input</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";

function ControlledInput() {
  const [name, setName] = useState("");

const handleChange = (e) =&gt; {
    setName(e.target.value);
  };

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Submitted Name: ${name}`);
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;h2&gt;Controlled Input Example&lt;/h2&gt;

&lt;input
        type="text"
        value={name}   // controlled by state
        onChange={handleChange}
        placeholder="Enter your name"
      /&gt;

&lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default ControlledInput;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1459" data-end="1478">✅ <strong data-start="1461" data-end="1476">Explanation</strong></p>
<ul data-start="1479" data-end="1637">
<li data-start="1479" data-end="1541">
<p data-start="1481" data-end="1541"><code data-start="1481" data-end="1495">value={name}</code> &rarr; the input value always matches the state.</p>
</li>
<li data-start="1542" data-end="1589">
<p data-start="1544" data-end="1589"><code data-start="1544" data-end="1554">onChange</code> &rarr; updates the state when typing.</p>
</li>
<li data-start="1590" data-end="1637">
<p data-start="1592" data-end="1637">React state fully controls the input field.</p>
</li>
</ul>
<hr data-start="1639" data-end="1642" />
<h2 data-start="1644" data-end="1680"><strong data-start="1647" data-end="1680">2. Multiple Controlled Inputs</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";

function MultiControlledForm() {
  const [form, setForm] = useState({ username: "", email: "" });

const handleChange = (e) =&gt; {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Username: ${form.username}, Email: ${form.email}`);
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;h2&gt;Multiple Controlled Inputs&lt;/h2&gt;

&lt;input
        type="text"
        name="username"
        placeholder="Username"
        value={form.username}
        onChange={handleChange}
      /&gt;
      &lt;br /&gt;&lt;br /&gt;

&lt;input
        type="email"
        name="email"
        placeholder="Email"
        value={form.email}
        onChange={handleChange}
      /&gt;
      &lt;br /&gt;&lt;br /&gt;

&lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default MultiControlledForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2596" data-end="2615">✅ <strong data-start="2598" data-end="2613">Explanation</strong></p>
<ul data-start="2616" data-end="2725">
<li data-start="2616" data-end="2664">
<p data-start="2618" data-end="2664">Uses one <code data-start="2627" data-end="2633">form</code> state object for all inputs.</p>
</li>
<li data-start="2665" data-end="2725">
<p data-start="2667" data-end="2725"><code data-start="2667" data-end="2684">[e.target.name]</code> dynamically updates the correct input.</p>
</li>
</ul>
<hr data-start="2727" data-end="2730" />
<h2 data-start="2732" data-end="2770"><strong data-start="2735" data-end="2770">3. Controlled Select &amp; Textarea</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";

function SelectTextareaForm() {
  const [gender, setGender] = useState("male");
  const [bio, setBio] = useState("");

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Gender: ${gender}, Bio: ${bio}`);
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;h2&gt;Select &amp; Textarea (Controlled)&lt;/h2&gt;

&lt;label&gt;
        Gender:
        &lt;select value={gender} onChange={(e) =&gt; setGender(e.target.value)}&gt;
          &lt;option value="male"&gt;Male&lt;/option&gt;
          &lt;option value="female"&gt;Female&lt;/option&gt;
        &lt;/select&gt;
      &lt;/label&gt;
      &lt;br /&gt;&lt;br /&gt;

&lt;label&gt;
        Bio:
        &lt;textarea
          value={bio}
          onChange={(e) =&gt; setBio(e.target.value)}
          placeholder="Write about yourself..."
        /&gt;
      &lt;/label&gt;
      &lt;br /&gt;&lt;br /&gt;

&lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default SelectTextareaForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3709" data-end="3728">✅ <strong data-start="3711" data-end="3726">Explanation</strong></p>
<ul data-start="3729" data-end="3845">
<li data-start="3729" data-end="3792">
<p data-start="3731" data-end="3792">Both <code data-start="3736" data-end="3744">select</code> and <code data-start="3749" data-end="3759">textarea</code> are controlled by React state.</p>
</li>
<li data-start="3793" data-end="3845">
<p data-start="3795" data-end="3845">Their <code data-start="3801" data-end="3808">value</code> reflects React state at all times.</p>
</li>
</ul>
<hr data-start="3847" data-end="3850" />
<h2 data-start="3852" data-end="3892"><strong data-start="3855" data-end="3892">4. Why Use Controlled Components?</strong></h2>
<p data-start="3894" data-end="3912">✅ <strong data-start="3896" data-end="3910">Advantages</strong></p>
<ul data-start="3913" data-end="4111">
<li data-start="3913" data-end="3962">
<p data-start="3915" data-end="3962">React has <strong data-start="3925" data-end="3941">full control</strong> over input values.</p>
</li>
<li data-start="3963" data-end="4010">
<p data-start="3965" data-end="4010">Easier to validate and sanitize user input.</p>
</li>
<li data-start="4011" data-end="4054">
<p data-start="4013" data-end="4054">Predictable and testable form behavior.</p>
</li>
<li data-start="4055" data-end="4111">
<p data-start="4057" data-end="4111">Enables conditional rendering based on input values.</p>
</li>
</ul>
<p data-start="4113" data-end="4135">⚠️ <strong data-start="4116" data-end="4133">Disadvantages</strong></p>
<ul data-start="4136" data-end="4295">
<li data-start="4136" data-end="4186">
<p data-start="4138" data-end="4186">More code compared to uncontrolled components.</p>
</li>
<li data-start="4187" data-end="4295">
<p data-start="4189" data-end="4295">Can cause performance issues in <strong data-start="4221" data-end="4241">very large forms</strong> (solution: libraries like Formik, React Hook Form).</p>
</li>
</ul>
<hr data-start="4297" data-end="4300" />
<h2 data-start="4302" data-end="4316"><strong data-start="4305" data-end="4316">Summary</strong></h2>
<ul data-start="4318" data-end="4599">
<li data-start="4318" data-end="4391">
<p data-start="4320" data-end="4391"><strong data-start="4320" data-end="4345">Controlled components</strong> = input values managed via <strong data-start="4373" data-end="4388">React state</strong>.</p>
</li>
<li data-start="4392" data-end="4447">
<p data-start="4394" data-end="4447">Use <code data-start="4398" data-end="4405">value</code> + <code data-start="4408" data-end="4418">onChange</code> for handling input fields.</p>
</li>
<li data-start="4448" data-end="4523">
<p data-start="4450" data-end="4523">Works with <code data-start="4461" data-end="4470">&lt;input&gt;</code>, <code data-start="4472" data-end="4484">&lt;textarea&gt;</code>, <code data-start="4486" data-end="4496">&lt;select&gt;</code>, checkboxes, and radios.</p>
</li>
<li data-start="4524" data-end="4599">
<p data-start="4526" data-end="4599">Great for validation, real-time feedback, and form submission handling.</p>
</li>
</ul>

Web Technology View More