Forms and Controlled Inputs

Forms are one of the most common places where a UI needs to track live, changing data — every keystroke, checkbox toggle, or selection needs to be reflected somewhere. React offers two approaches to working with form inputs: controlled components, where React state is the single source of truth for the input's value, and uncontrolled components, where the DOM itself holds the current value and React reads it only when needed.

Controlled inputs are the more common and more "React-idiomatic" approach, because they keep form data inside your component's state, making it easy to validate, transform, or react to changes as they happen.

Why it matters

Sign-up, search, checkout and settings are all forms. In React the usual approach makes state the single source of truth for every field, which makes validation, conditional fields and submission straightforward. It is the pattern behind every form library you will use later.

Controlled Inputs: value + onChange

A controlled input's value attribute is bound to a piece of React state, and an onChange handler updates that state on every keystroke. Because the input's displayed value always comes from state rather than from whatever the user typed directly into the DOM, React is fully "in control" of what the field shows at any moment — hence the name.

Uncontrolled Inputs and refs

An uncontrolled input has no value prop tying it to state; instead, the browser DOM manages the current value internally, and you read it only when you need it — typically via a ref — such as at form submission time. Uncontrolled inputs require less code and can be useful for simple forms or when integrating with non-React code, but they make it harder to validate or react to changes as the user types.

Handling Multiple Fields and Submission

For forms with several fields, it is common to store all the field values in a single state object and update it with one shared handler that reads the input's name attribute to know which field changed. On submission, an onSubmit handler on the <form> element (paired with event.preventDefault()) is the standard place to validate and send the collected data.

• Controlled: value comes from state, onChange updates state — React state is the source of truth.
• Uncontrolled: the DOM holds the value; a ref reads it on demand, typically at submit time.
• A checkbox uses "checked" instead of "value" as its controlled prop, paired with onChange.

Example

import { useState } from 'react';

function SignupForm() {
  const [formData, setFormData] = useState({ username: '', agreeToTerms: false });

  function handleChange(event) {
    const { name, value, type, checked } = event.target;
    setFormData((prev) => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Submitting:', formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username} onChange={handleChange} placeholder="Username" />
      <label>
        <input type="checkbox" name="agreeToTerms" checked={formData.agreeToTerms} onChange={handleChange} />
        I agree to the terms
      </label>
      <button type="submit" disabled={!formData.agreeToTerms}>Sign Up</button>
    </form>
  );
}

export default SignupForm;

Typing into the username field updates formData.username live; checking the terms checkbox enables the "Sign Up" button (it stays disabled while unchecked); submitting logs the current { username, agreeToTerms } object to the console without reloading the page.

Exercise

Do this in src/App.jsx of a Vite + React project. Build a controlled form with two fields, email and password, kept in one state object and updated by a single change handler that uses the name of the input. Disable the submit button until both fields have a value.

Expected result: typing updates both fields; the Sign in button is disabled while either field is empty.

import { useState } from "react";

export default function App() {
  const [form, setForm] = useState({ email: "", password: "" });

  // TODO: function handleChange(event) that updates the field named event.target.name

  return (
    <form>
      {/* TODO: email input (name, value, onChange) */}
      {/* TODO: password input (name, value, onChange) */}
      {/* TODO: submit button, disabled unless both fields are filled */}
    </form>
  );
}

import { useState } from "react";

export default function App() {
  const [form, setForm] = useState({ email: "", password: "" });

  function handleChange(event) {
    setForm({ ...form, [event.target.name]: event.target.value });
  }

  return (
    <form>
      <input type="email" name="email" value={form.email} onChange={handleChange} />
      <input type="password" name="password" value={form.password} onChange={handleChange} />
      <button type="submit" disabled={!form.email || !form.password}>
        Sign in
      </button>
    </form>
  );
}

Quick quiz

Interview questions