Forms in React

Controlled inputs, form validation, and handling submission - the patterns for building forms that feel native and stay in sync with state.

What it is, in plain English: In React, form inputs are usually 'controlled' -- their value comes from state, and every keystroke updates that state via onChange. This keeps the displayed value and the underlying data always in sync, and makes validation, formatting, and conditional logic straightforward. The alternative ('uncontrolled' inputs using refs) exists for specific cases but controlled inputs are the default approach.

Keeping form inputs in sync with state

The controlled input pattern

function NameInput() {
  const [name, setName] = React.useState("");

  return (
    <input
      value={name}                              {/* the input's value IS the state */}
      onChange={(e) => setName(e.target.value)} {/* every keystroke updates state */}
    />
  );
}

// This is "controlled" because React state controls the input's value.
// At every moment, the displayed text and the state value are identical.

Why controlled inputs?

// Controlled inputs let you:
// 1. Validate as the user types
// 2. Format input (e.g. force uppercase, add commas to numbers)
// 3. Conditionally enable/disable the submit button
// 4. Clear the form programmatically

function PhoneInput() {
  const [phone, setPhone] = React.useState("");

  function handleChange(e) {
    const digitsOnly = e.target.value.replace(/\D/g, "");  // strip non-digits
    setPhone(digitsOnly);
  }

  return <input value={phone} onChange={handleChange} placeholder="Numbers only" />;
}

Different input types

function PreferencesForm() {
  const [agree, setAgree] = React.useState(false);
  const [plan, setPlan] = React.useState("free");
  const [bio, setBio] = React.useState("");

  return (
    <form>
      {/* Checkbox uses 'checked', not 'value': */}
      <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />

      {/* Select works like text input -- value + onChange: */}
      <select value={plan} onChange={(e) => setPlan(e.target.value)}>
        <option value="free">Free</option>
        <option value="pro">Pro</option>
      </select>

      {/* Textarea also uses value + onChange (not children, unlike HTML): */}
      <textarea value={bio} onChange={(e) => setBio(e.target.value)} />
    </form>
  );
}

Handling submission

function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  function handleSubmit(e) {
    e.preventDefault();   // stop the page from reloading
    console.log("Logging in with:", email, password);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Log In</button>
    </form>
  );
}

Try It Yourself (JSX)

// Controlled inputs -- value comes from state, onChange updates it

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

return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Type your name"
      />
      <p>You typed: {name}</p>
    </div>
  );
}

// A complete form with multiple field types
function SignupForm() {
  const [form, setForm] = React.useState({
    name: "", email: "", role: "user", subscribe: true,
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

function handleChange(e) {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({ ...prev, [name]: type === "checkbox" ? checked : value }));
  }

function validate() {
    const newErrors = {};
    if (!form.name.trim()) newErrors.name = "Name is required";
    if (!form.email.includes("@")) newErrors.email = "Invalid email";
    return newErrors;
  }

function handleSubmit(e) {
    e.preventDefault();
    const newErrors = validate();
    setErrors(newErrors);
    if (Object.keys(newErrors).length === 0) {
      setSubmitted(true);
      console.log("Submitted:", form);
    }
  }

if (submitted) return <p>Thanks, {form.name}!</p>;

return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Name" />
      {errors.name && <p style={{color:"red"}}>{errors.name}</p>}

<input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
      {errors.email && <p style={{color:"red"}}>{errors.email}</p>}

<select name="role" value={form.role} onChange={handleChange}>
        <option value="user">User</option>
        <option value="admin">Admin</option>
      </select>

<label>
        <input type="checkbox" name="subscribe" checked={form.subscribe} onChange={handleChange} />
        Subscribe to newsletter
      </label>

<button type="submit">Sign Up</button>
    </form>
  );
}

function App() {
  return (
    <div>
      <ControlledInput />
      <SignupForm />
    </div>
  );
}

One state object for the whole form, and validation

Managing all fields with a single state object

function SignupForm() {
  const [form, setForm] = React.useState({ name: "", email: "", password: "" });

  // ONE handler for every field, using the input's 'name' attribute:
  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));  // computed property name
  }

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

Validation -- on submit, and as-you-type

function ValidatedForm() {
  const [form, setForm] = React.useState({ email: "", password: "" });
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});

  function validate(values) {
    const errs = {};
    if (!values.email.includes("@")) errs.email = "Invalid email";
    if (values.password.length < 8) errs.password = "Min 8 characters";
    return errs;
  }

  function handleChange(e) {
    const { name, value } = e.target;
    const newForm = { ...form, [name]: value };
    setForm(newForm);
    if (touched[name]) setErrors(validate(newForm));  // only validate after first blur
  }

  function handleBlur(e) {
    setTouched(prev => ({ ...prev, [e.target.name]: true }));
    setErrors(validate(form));
  }

  function handleSubmit(e) {
    e.preventDefault();
    const errs = validate(form);
    setErrors(errs);
    setTouched({ email: true, password: true });
    if (Object.keys(errs).length === 0) {
      console.log("Valid! Submitting:", form);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={form.email} onChange={handleChange} onBlur={handleBlur} />
      {touched.email && errors.email && <p>{errors.email}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

Uncontrolled inputs with useRef (the alternative)

// Sometimes you don't need to track every keystroke in state --
// just read the value when the form is submitted:
function UncontrolledForm() {
  const nameRef = React.useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log("Name:", nameRef.current.value);  // read directly from the DOM
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} defaultValue="" />   {/* defaultValue, not value! */}
      <button type="submit">Submit</button>
    </form>
  );
}
// Use uncontrolled inputs for: simple forms, file inputs (always uncontrolled),
// integrating with non-React code, or performance-critical forms with many fields.

React Hook Form and the file input special case

// File inputs are ALWAYS uncontrolled -- you can't set their value programmatically
// for security reasons (browsers prevent JS from setting a file input's value):
function FileUpload() {
  const [fileName, setFileName] = React.useState("");

  function handleChange(e) {
    const file = e.target.files[0];
    setFileName(file?.name ?? "");
  }

  return (
    <div>
      <input type="file" onChange={handleChange} />   {/* no 'value' prop possible */}
      {fileName && <p>Selected: {fileName}</p>}
    </div>
  );
}

React Hook Form -- the standard library for complex forms

// npm install react-hook-form
// Uncontrolled-by-default (better performance for large forms),
// built-in validation, minimal re-renders:
import { useForm } from "react-hook-form";

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  function onSubmit(data) {
    console.log(data);  // { email: "...", password: "..." }
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: true, pattern: /^\S+@\S+$/ })} />
      {errors.email && <p>Invalid email</p>}

      <input type="password" {...register("password", { minLength: 8 })} />
      {errors.password && <p>Min 8 characters</p>}

      <button type="submit">Sign Up</button>
    </form>
  );
}
// register() returns { name, onChange, onBlur, ref } spread onto the input --
// the library manages state outside React's render cycle for performance,
// only re-rendering when validation state actually needs to update.

Official Sources

The Codex links only to official documentation. No third-party tutorials.