Forms in React

HTML forms have their own built-in state, managed by the DOM. React gives you two approaches for working with form inputs: controlled components (the React way) and uncontrolled components (relying on the DOM). Understanding the difference helps you choose the right pattern for each situation.

Controlled Components

In a controlled component, the input's value is driven entirely by React state. Every keystroke calls an onChange handler that updates state, and the state value is fed back into the input as the value prop:

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

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Submitted: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Because React controls the value, you always have the current input in state and can easily validate, transform, or reset it.

Handling Multiple Inputs

For forms with several fields, use a single state object and update it by field name:

function SignupForm() {
  const [fields, setFields] = useState({ email: "", password: "" });

  function handleChange(event) {
    const { name, value } = event.target;
    setFields((prev) => ({ ...prev, [name]: value }));
  }

  return (
    <form>
      <input name="email" value={fields.email} onChange={handleChange} />
      <input name="password" type="password" value={fields.password} onChange={handleChange} />
    </form>
  );
}

The computed property [name] updates only the changed field while spreading the rest of the state.

Select and Textarea

React controls and the same way as text inputs — using a value prop and an onChange handler:

const [colour, setColour] = useState("blue");

<select value={colour} onChange={(e) => setColour(e.target.value)}>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
</select>

const [agreed, setAgreed] = useState(false);

<input
  type="checkbox"
  checked={agreed}
  onChange={(e) => setAgreed(e.target.checked)}
/>

import { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    alert(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" defaultValue="" />
      <button type="submit">Submit</button>
    </form>
  );
}