Controlled Inputs with onChange

A controlled input is one where React state is the single source of truth for the input's value. You set `value={stateVariable}` and provide an `onChange` handler that updates state. Every keystroke calls `onChange`, React updates state, re-renders the component, and the input displays the new value from state. This round-trip gives you complete programmatic control: validation, formatting, and disabling are all straightforward. An uncontrolled input stores its value in the DOM and is read via a ref. Uncontrolled inputs are simpler for quick forms but harder to validate synchronously. React recommends controlled components for most forms because they integrate naturally with state-driven logic such as enabling a submit button only when all fields are valid. The `onChange` event for ``, `

`, and `<select>` fires on every character change, unlike the native DOM `change` event which fires only on blur. `e.target.value` gives the current string value; `e.target.checked` gives the boolean for checkboxes. For `<select multiple>` you need to iterate `e.target.selectedOptions` to collect an array. Understanding controlled inputs is prerequisite knowledge for building any non-trivial form in React.
        </article>

<div class="example-box mt-4" id="code-example">
            <div class="example-box-header">
                <i class="fa-solid fa-code"></i>
                Example
            </div>
            <div class="example-box-body relative group">
                <button onclick="copyCode(this)"
                    class="copy-btn absolute top-3 right-3 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <i class="fa-regular fa-copy text-xs"></i> Copy
                </button>
                <pre class="language-html"><code class="language-html">import { useState } from 'react';

function RegistrationForm() {
  const [form, setForm] = useState({
    username: '',
    email: '',
    role: 'viewer',
    agree: false,
  });
  const [submitted, setSubmitted] = useState(false);

const update = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

const isValid = form.username.length >= 3 && form.email.includes('@') && form.agree;

const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid) setSubmitted(true);
  };

if (submitted) return <p>Registered as <strong>{form.username}</strong>!</p>;

return (
    <form onSubmit={handleSubmit}>
      {/* Text input */}
      <input
        type="text"
        placeholder="Username (min 3 chars)"
        value={form.username}
        onChange={e => update('username', e.target.value)}
      />

{/* Email input */}
      <input
        type="email"
        placeholder="Email"
        value={form.email}
        onChange={e => update('email', e.target.value)}
      />

{/* Select */}
      <select value={form.role} onChange={e => update('role', e.target.value)}>
        <option value="viewer">Viewer</option>
        <option value="editor">Editor</option>
        <option value="admin">Admin</option>
      </select>

{/* Checkbox */}
      <label>
        <input
          type="checkbox"
          checked={form.agree}
          onChange={e => update('agree', e.target.checked)}
        />
        I agree to the terms
      </label>

<button type="submit" disabled={!isValid}>Register</button>
    </form>
  );
}

export default RegistrationForm;</code></pre>
            </div>
            <div class="example-box-footer dark:bg-gray-800/60">
                <span class="text-xs text-gray-400 flex items-center gap-1.5">
                    <i class="fa-solid fa-file-code text-gray-300"></i>
                    HTML
                </span>
                <div class="flex items-center gap-2">
                                        <button onclick="toggleTryIt()" id="tryit-toggle-btn" class="try-it-btn">
                        <i class="fa-solid fa-play"></i> Try it Yourself »
                    </button>
                                        <a href="https://syntaxstudy.com/editor/react-events-2" target="_blank"
                        class="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-brand transition-colors px-2 py-1 rounded border border-gray-200 dark:border-gray-700"
                        title="Open in full editor">
                        <i class="fa-solid fa-up-right-from-square text-xs"></i> Full Editor
                    </a>
                </div>
            </div>
        </div>

<div id="tryit-panel" class="tryit-panel" style="display:none">
            <div class="tryit-panel-header">
                <span class="font-semibold text-sm flex items-center gap-2">
                    <i class="fa-solid fa-laptop-code"></i> Try it Yourself
                </span>
                <div class="flex items-center gap-2">
                    <button onclick="runTryIt()" class="tryit-run-btn">
                        <i class="fa-solid fa-play text-xs"></i> Run
                    </button>
                    <button onclick="resetTryIt()" class="tryit-reset-btn">
                        <i class="fa-solid fa-rotate-left text-xs"></i> Reset
                    </button>
                    <button onclick="toggleTryIt()" class="tryit-close-btn" title="Close">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>
            <div class="tryit-body">
                <div class="tryit-editor-col">
                    <div class="tryit-col-label">Code</div>
                    <textarea id="tryit-code" class="tryit-textarea" spellcheck="false">

Related Resources