Forms and inputs

A name on a cup, typed into React state

A form is where people talk back to your page: a search box, a sign-up form, a note for the barista. The browser already knows how to show form fields and keep what people type in them. React's question is who keeps that text: your state, or the browser. Here is a field whose text lives in React state. Click in the box under the code and type a name.

1import { useState } from "react";2 3export default function App() {4  const [name, setName] = useState("");5 6  return (7    <div>8      <label>9        Name on the cup{" "}10        <input value={name} onChange={(e) => setName(e.target.value)} />11      </label>12      <p>{name === "" ? "Type a name for your cup." : `Your cup will say: ${name}`}</p>13    </div>14  );15}

Line 4 makes a piece of state, name, that starts as an empty string. Line 10 is the input, with two props that work as a pair:

• value={name} tells React what the box must show: whatever name holds.
• onChange runs on every key. e.target is the input, and e.target.value is the text the browser wants to show now, with your new letter in it. The handler stores that text with setName.

Line 12 reads name too, so the sentence under the box changes as you type: type Asha and it says Your cup will say: Asha. Both the box and the sentence show the same state, so they can't disagree.

An input like this is controlled: React state decides what it shows. The other kind, an uncontrolled input, lets the browser keep the text, and your code reads it when the form is sent. This lesson covers both, for every kind of field, and then how to check what people type and how to label fields so everyone can use them.

Controlled inputs: the value and onChange pair

"React state decides" is meant word for word. The browser offers a new text on every key, but the box only shows it if your code puts it in state. So your onChange can store something different from what was typed. This coupon box stores every key in capital letters:

1import { useState } from "react";2 3export default function App() {4  const [code, setCode] = useState("");5 6  function handleChange(e) {7    setCode(e.target.value.toUpperCase());8  }9 10  return (11    <div>12      <label>13        Coupon code{" "}14        <input value={code} onChange={handleChange} maxLength={8} />15      </label>16      <p>{code.length} of 8 characters</p>17    </div>18  );19}

Line 7 is the only change from a plain controlled box: it stores e.target.value.toUpperCase(), the offered text in capitals. Type tea5 in the result. The box shows TEA5, because line 14 shows code, not the keys. maxLength on line 14 is the browser's own limit, and line 16 counts the characters as you type: 4 of 8 characters.

Try other rules for line 7 in the playground. Each key adds a row: the text the browser offered, and what your code stored.

1import { useState } from "react";2 3export default function App() {4  const [code, setCode] = useState("");5 6  function handleChange(e) {7    setCode(e.target.value.toUpperCase());8  }9 10  return <input value={code} onChange={handleChange} />;11}

With Upper case, type tea5: the last row says the browser offered "TEA5" and code is "TEA5", because each earlier letter was already in capitals. With Digits only, letters vanish as you type them and digits stay. With No onChange, every key is offered and then dropped: nothing sets state, so React puts the old text back after each key. That's the read-only box the Sharing state lesson showed.

Number boxes still give you strings

Every input hands onChange a string, even type="number". The number box only changes which keys the browser accepts and adds arrows to step the value. Here the price is worked out from the box:

1import { useState } from "react";2 3export default function App() {4  const [cups, setCups] = useState("2");5  const total = Number(cups) * 4;6 7  return (8    <div>9      <label>10        Cups of chai{" "}11        <input type="number" min="1" max="9" value={cups} onChange={(e) => setCups(e.target.value)} />12      </label>13      <p>Total: ${total}</p>14      <p>cups is a {typeof cups}: "{cups}"</p>15    </div>16  );17}

Line 4 starts cups as the string "2", the same kind of value the box will give. Line 11 stores whatever the box offers, as it is. Line 5 turns it into a number only for the maths, with Number(), so line 13 shows Total: $8. Type 3 and it says Total: $12, and line 14 still says cups is a string: "3". Empty the box and the total is $0, because Number("") is 0, while the box stays empty instead of jumping to a 0 under your cursor.

Keep what the box shows in state, and convert where you use it. If you add instead of multiply, the string shows: cups + 1 is "3" + 1, which JavaScript joins into "31". Exercise 1 asks you to fix exactly that.

Checkboxes, radio buttons, selects, and text areas

Every kind of field can be controlled. The pattern is always the same, a prop that React sets and an onChange that sets state, but the prop and the place you read the new value differ. This tea order uses all four. Click a size, tick milk, pick a sweetener, and write a note:

1import { useState } from "react";2 3export default function App() {4  const [size, setSize] = useState("small");5  const [milk, setMilk] = useState(false);6  const [sweetener, setSweetener] = useState("none");7  const [note, setNote] = useState("");8 9  return (10    <div className="stack">11      <fieldset>12        <legend>Size</legend>13        <label>14          <input type="radio" name="size" value="small" checked={size === "small"} onChange={(e) => setSize(e.target.value)} />15          Small16        </label>17        <label>18          <input type="radio" name="size" value="large" checked={size === "large"} onChange={(e) => setSize(e.target.value)} />19          Large20        </label>21      </fieldset>22      <label>23        <input type="checkbox" checked={milk} onChange={(e) => setMilk(e.target.checked)} />24        Add milk25      </label>26      <label>27        Sweetener28        <select value={sweetener} onChange={(e) => setSweetener(e.target.value)}>29          <option value="none">None</option>30          <option value="sugar">Sugar</option>31          <option value="honey">Honey</option>32        </select>33      </label>34      <label>35        Note for the barista36        <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={2} />37      </label>38      <p>39        A {size} tea{milk ? " with milk" : ""}, sweetener: {sweetener}.{note && ` Note: ${note}`}40      </p>41    </div>42  );43}

Lines 4 to 7 keep one piece of state per field. Then, field by field:

• Radio buttons (lines 14 and 18) share name="size", so the browser lets you pick one. Each is checked when size equals its own value, and onChange stores e.target.value, the picked button's value. <fieldset> and <legend> on lines 11 and 12 give the group its name, "Size".
• The checkbox (line 23) uses checked instead of value, and reads e.target.checked, which is true or false. A checkbox's e.target.value is the text "on" whether it's ticked or not; Exercise 2 shows what that does.
• The menu (line 28) takes value on the <select> itself. React picks the <option> whose value matches; you don't write selected on an option as you would in plain HTML.
• The text area (line 36) takes value too. In plain HTML its first text goes between the tags; in React, use value or defaultValue instead, and React warns if you put text between the tags.

Line 39 reads all four. After Large, milk, honey, and the note Extra hot, it says A large tea with milk, sweetener: honey. Note: Extra hot. Wrapping each input in a <label> also means a click on the words, like "Add milk", clicks the field.

How to read the table: each row is one kind of field, with the prop React sets and where the new value is in the event.

Why React warns about an input becoming controlled

A field should stay one kind, controlled or uncontrolled, for its whole life. A value of undefined (or null) counts as no value at all, so a field that gets one starts uncontrolled. If a later render gives it a real value, the field changes kind halfway through its life, and React warns. It happens easily with an object in state that doesn't have the field yet. Type a nickname in this one:

1import { useState } from "react";2 3export default function App() {4  const [profile, setProfile] = useState({ name: "Asha" });5 6  return (7    <div>8      <label>9        Nickname{" "}10        <input11          value={profile.nickname}12          onChange={(e) => setProfile({ ...profile, nickname: e.target.value })}13        />14      </label>15      <p>Hello, {profile.nickname || profile.name}!</p>16    </div>17  );18}

Line 4 starts profile with a name but no nickname, so on the first render line 11 passes value={undefined}: an uncontrolled box. The first key runs line 12, which adds nickname to the object, and the next render passes a real string. The box works, and the greeting on line 15 says Hello, Ash! after you type Ash, but the console under the result shows React's warning:

A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

The fix is to give every controlled field a real starting value. Press Edit & run and change line 4 to useState({ name: "Asha", nickname: "" }). Now the box is controlled from the first render, with an empty string, and typing prints no warning. For a checkbox, the same rule applies to checked: start it as false, not undefined.

How to read the table: each row is a warning React prints about fields, what caused it, and the fix.

Uncontrolled inputs and FormData

Many forms don't need to know anything until the person presses Send: a feedback form, a newsletter box, a contact form. For those, you can let the browser keep every field and read them all at once, at the end. You give each field a name, set its first value with defaultValue (or defaultChecked for a checkbox), and read the form in its submit handler. Press Send in the result, then tick the box and press it again:

1import { useState } from "react";2 3export default function App() {4  const [sent, setSent] = useState(null);5 6  function handleSubmit(e) {7    e.preventDefault();8    const formData = new FormData(e.currentTarget);9    setSent([...formData.entries()]);10  }11 12  return (13    <form onSubmit={handleSubmit}>14      <label>15        Name <input name="name" defaultValue="Asha" />16      </label>17      <label>18        Rating19        <select name="rating" defaultValue="5">20          <option value="5">5 stars</option>21          <option value="3">3 stars</option>22          <option value="1">1 star</option>23        </select>24      </label>25      <label>26        <input type="checkbox" name="offers" /> Email me offers27      </label>28      <label>29        Comment <textarea name="comment" defaultValue="Lovely chai." />30      </label>31      <input placeholder="No name, so not sent" />32      <button>Send</button>33      {sent && (34        <ul>35          {sent.map(([name, value]) => (36            <li key={name}>37              {name}: {value}38            </li>39          ))}40        </ul>41      )}42    </form>43  );44}

The fields on lines 15 to 31 have no value and no onChange: they're uncontrolled. defaultValue on lines 15, 19, and 29 only sets the starting text; after that, the browser keeps what you type. Pressing Send runs handleSubmit (lines 6 to 10):

1. Line 7, e.preventDefault(), stops the browser's own action for a submit, which is to load a new page (the Responding to events lesson covers it).
2. Line 8 makes a FormData from the form. e.currentTarget is the element the handler is on, the <form>. FormData collects every field with a name, as [name, value] pairs.
3. Line 9 spreads those pairs into an array and stores it, so lines 33 to 41 can list them.

The first Send lists three lines: name: Asha, rating: 5, and comment: Lovely chai. Two fields are missing. The input on line 31 has no name, so FormData skips it. The checkbox on line 26 is left out while it isn't ticked; tick it and Send again, and offers: on appears between rating and comment, because "on" is what a ticked box sends when it has no value.

To read one field, call formData.get("rating"): it returns the text, or null when nothing with that name was sent. Several checkboxes can share one name; formData.getAll("teas") returns all the ticked ones as an array (Exercise 5). And Object.fromEntries(formData) turns the pairs into one object, like { name: "Asha", rating: "5" }, using Object.fromEntries.

Controlled and uncontrolled forms also differ in how often React works. A controlled box sets state on every key, so React renders the component again for each one. An uncontrolled box changes nothing in React until Send. Count them:

function NameForm() {
  const [name, setName] = useState("");
  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button>Send</button>
    </form>
  );
}

Type Asha in the controlled form: 4 keys, 4 renders. Pick Uncontrolled and type it again: 4 keys, 0 renders. Press Send and it's 1 render, from setSent. A render per key is cheap for a small form like this, and it's what lets a controlled form react while you type. When nothing on the page needs the text until Send, uncontrolled fields do less work and need less code.

How to read the table: each row is something a form needs, the kind of field to pick for it, and why.

React 19 adds a third way to send a form: give it a function as its action, and React passes that function the FormData for you. That's the next lesson, Form actions. Reading a form in onSubmit, as here, keeps working.

Checking what people type

Before a form is sent, you usually check it: is there an @ in the email, is the password long enough? Two questions decide how the check feels: what counts as an error, and when the error appears. Here is a sign-up form that checks on blur (when you leave a field) and on submit. Type asha in Email, press Tab, then press Sign up:

1import { useState } from "react";2 3function validate({ email, password }) {4  const errors = {};5  if (!email.includes("@")) errors.email = "Enter an email with an @.";6  if (password.length < 8) errors.password = "Use at least 8 characters.";7  return errors;8}9 10export default function App() {11  const [values, setValues] = useState({ email: "", password: "" });12  const [touched, setTouched] = useState({});13  const [submitted, setSubmitted] = useState(false);14  const [done, setDone] = useState(false);15  const errors = validate(values);16  const show = (field) => (touched[field] || submitted) && errors[field];17 18  function handleChange(e) {19    setValues({ ...values, [e.target.name]: e.target.value });20  }21 22  function handleBlur(e) {23    setTouched({ ...touched, [e.target.name]: true });24  }25 26  function handleSubmit(e) {27    e.preventDefault();28    setSubmitted(true);29    if (Object.keys(errors).length === 0) setDone(true);30  }31 32  if (done) return <p>Welcome, {values.email}!</p>;33 34  return (35    <form onSubmit={handleSubmit} noValidate>36      <label>37        Email38        <input name="email" type="email" value={values.email} onChange={handleChange} onBlur={handleBlur} />39      </label>40      {show("email") && <p className="error">{errors.email}</p>}41      <label>42        Password43        <input name="password" type="password" value={values.password} onChange={handleChange} onBlur={handleBlur} />44      </label>45      {show("password") && <p className="error">{errors.password}</p>}46      <button>Sign up</button>47    </form>48  );49}

validate on lines 3 to 8 is a plain function: it takes the values and returns an errors object, with one message for each field that's wrong. Line 15 calls it on every render. The errors are worked out from the values, not kept in state, so they can never fall behind (the Choosing the state structure lesson calls this avoiding redundant state).

Three pieces of state decide when an error shows:

• touched (line 12) remembers which fields you've left. handleBlur on line 23 marks a field when it loses focus; React's onBlur runs then.
• submitted (line 13) becomes true when you press Sign up (line 28), so every error shows at once, even for fields you never visited.
• show on line 16 returns a field's message only when the field is touched or the form was submitted.

While you type asha, nothing shows. Tab away and line 40 shows Enter an email with an @. Press Sign up and the password's error joins it. Fix both, with an email like asha@example.com and an 8-letter password, and press Sign up: line 29 finds no errors and line 32 says Welcome, asha@example.com!. One handleChange (lines 18 to 20) serves both fields: [e.target.name] picks the field by the input's name, as in Updating objects in state.

The same check can show its error at three moments. Try each one on the same email box:

1const error = email.includes("@") ? "" : "Enter an email with an @.";2const showError = error && (touched || submitted);

How to read the table: each row is one moment to show an error, how it feels to the person filling in the form, and what it suits.

The browser's own checks

The browser can check fields too, with no JavaScript at all, through attributes on the field (the Form validation lesson covers them in depth). React passes them straight to the page:

• required: the field can't be empty.
• type="email", type="url": the text must look like an email or a web address.
• min and max, minLength and maxLength, and pattern: limits on numbers, length, and shape.

1import { useState } from "react";2 3export default function App() {4  const [joined, setJoined] = useState("");5 6  function handleSubmit(e) {7    e.preventDefault();8    setJoined(new FormData(e.currentTarget).get("email"));9  }10 11  return (12    <form onSubmit={handleSubmit}>13      <label>14        Email <input name="email" type="email" required />15      </label>16      <label>17        Cups a day <input name="cups" type="number" min="1" max="9" required />18      </label>19      <button>Join the tea club</button>20      {joined && <p>Joined: {joined}</p>}21    </form>22  );23}

Press Join the tea club with the boxes empty. The browser shows its own message next to the first problem, and handleSubmit doesn't run at all: the browser checks before it sends the submit event. Try asha as the email, then 12 cups (line 17 allows 1 to 9). Once both are fine, line 20 says Joined: and the email. The red outline comes from input:user-invalid in the styles.css tab; it only appears after you've touched a field.

The sign-up form above puts noValidate on its form (line 35). That turns off the browser's check on submit, so your own messages show instead of the browser's. Its fields keep type="email", which still gives phones the keyboard with an @ on it. Whichever you use, checks in the page only help people fill the form in: anyone can skip them, so the server must check the data again.

Labels that clicks and screen readers can use

Every field needs a label: visible text that says what it's for, joined to the field in the page's code. A label joined to its field does three jobs. You can click the words to reach the field, a bigger target on a phone. A screen reader, the program that reads a page aloud for people who can't see it, says the label when the field gets focus. And the label stays put while you type, unlike a placeholder, which disappears at the first key and isn't read out by every screen reader.

There are two ways to join a label to its field:

• Put the field inside the <label>, as every example so far has.
• Give the field an id and the label a htmlFor with the same text. htmlFor is JSX's name for HTML's for attribute, since for is a JavaScript word.

An id must be unique on the page, which is a problem for a component you use twice. React's useId Hook gives each copy of a component its own id:

1import { useId } from "react";2 3function EmailField({ label }) {4  const id = useId();5  return (6    <p>7      <label htmlFor={id}>{label}</label>{" "}8      <input id={id} type="email" aria-describedby={`${id}-hint`} />9      <br />10      <small id={`${id}-hint`}>We only use it for your receipts.</small>11    </p>12  );13}14 15export default function App() {16  return (17    <div>18      <EmailField label="Home email" />19      <EmailField label="Work email" />20    </div>21  );22}

Line 4 asks React for an id. Each EmailField gets a different one, and keeps it every render. Line 7 joins the label to the box with htmlFor={id}, and line 8 gives the box that id. Click the words Work email in the result: the second box gets the cursor. Line 10 gives the hint its own id, made from the same one, and line 8 points at it with aria-describedby, so a screen reader reads the hint after the label. Don't use useId for list keys; keys come from your data.

Error messages work the same way. Give the message an id, point the field's aria-describedby at it, and set aria-invalid on the field while it's wrong, so a screen reader says the field is invalid and reads why. Radio buttons and checkboxes that belong together go in a <fieldset> whose <legend> names the group, as the tea order's sizes did. The Accessible React components lesson goes further.

A tea club sign-up form

Here is a whole form put together: controlled fields of three kinds, labels joined with htmlFor, checks on blur and on submit, and errors a screen reader can find. Press Join first with everything empty, then fill it in.

1import { useState } from "react";2 3const empty = { name: "", email: "", plan: "monthly", rules: false };4 5function validate(values) {6  const errors = {};7  if (values.name.trim() === "") errors.name = "Tell us your name.";8  if (!values.email.includes("@")) errors.email = "Enter an email with an @.";9  if (!values.rules) errors.rules = "Please accept the club rules.";10  return errors;11}12 13export default function App() {14  const [values, setValues] = useState(empty);15  const [touched, setTouched] = useState({});16  const [submitted, setSubmitted] = useState(false);17  const [member, setMember] = useState(null);18  const errors = validate(values);19  const show = (field) => (touched[field] || submitted) && errors[field];20 21  function handleChange(e) {22    const { name, type, value, checked } = e.target;23    setValues({ ...values, [name]: type === "checkbox" ? checked : value });24  }25 26  function handleBlur(e) {27    setTouched({ ...touched, [e.target.name]: true });28  }29 30  function handleSubmit(e) {31    e.preventDefault();32    setSubmitted(true);33    if (Object.keys(errors).length > 0) return;34    setMember(values);35    setValues(empty);36    setTouched({});37    setSubmitted(false);38  }39 40  return (41    <form onSubmit={handleSubmit} noValidate>42      {member && <p>Welcome to the tea club, {member.name}! Plan: {member.plan}.</p>}43      <label htmlFor="name">Name</label>44      <input id="name" name="name" value={values.name} onChange={handleChange} onBlur={handleBlur}45        aria-invalid={Boolean(show("name"))} aria-describedby="name-error" />46      <p id="name-error" className="error">{show("name")}</p>47      <label htmlFor="email">Email</label>48      <input id="email" name="email" type="email" value={values.email} onChange={handleChange} onBlur={handleBlur}49        aria-invalid={Boolean(show("email"))} aria-describedby="email-error" />50      <p id="email-error" className="error">{show("email")}</p>51      <label htmlFor="plan">Plan</label>52      <select id="plan" name="plan" value={values.plan} onChange={handleChange}>53        <option value="monthly">Monthly box</option>54        <option value="yearly">Yearly box</option>55      </select>56      <label>57        <input type="checkbox" name="rules" checked={values.rules} onChange={handleChange} />{" "}58        I accept the club rules59      </label>60      <p className="error">{show("rules")}</p>61      <button>Join</button>62    </form>63  );64}

empty on line 3 holds every field's starting value, so each controlled field has a real value from the first render: two strings, "monthly" for the menu, and false for the checkbox. Line 22 reads four things from the input with destructuring, and line 23 stores checked for the checkbox and value for everything else, so one handler serves all four fields.

Press Join with nothing filled in: three errors appear, and lines 45 and 49 set aria-invalid on the name and email boxes. Each aria-describedby points at the paragraph under its box, where the message is. Fill in Asha, an email with an @, pick the yearly box, tick the rules, and press Join. Lines 34 to 37 save the member and put every field back to empty. Because the fields are controlled, setting the state empties the boxes, and line 42 says Welcome to the tea club, Asha! Plan: yearly.

Common mix-ups

• "React's onChange runs when you leave the field, like the browser's change event." No. React's onChange runs on every key, like the browser's input event. For leaving a field, use onBlur.
• "A number box gives you a number." No. e.target.value is always a string. Convert it with Number() where you do maths.
• "Uncontrolled means React can't read the field." No. You read it when you need it: on submit, with FormData. Refs can reach it at other times; a later lesson, Manipulating the DOM with refs, shows how.
• "An empty box can have a value of undefined." No. undefined means "no value", which makes the field uncontrolled. An empty controlled box has "".
• "A placeholder is enough of a label." No. It disappears when you type, and not every screen reader reads it. Use a <label>.
• "With required and type="email", the server can trust the data." No. Checks in the page help people; anyone can skip them. The server checks again.

Practice exercises

Each exercise shows its code's result, or shows it when you press Edit & run. Change the code, and the result updates as you type. Try a guess first, then use the hints.

import { useState } from "react";

export default function App() {
  const [cups, setCups] = useState("3");

  return (
    <div>
      <input type="number" value={cups} onChange={(e) => setCups(e.target.value)} />
      <p>With one more for a friend: {cups + 1}</p>
    </div>
  );
}

1import { useState } from "react";2 3export default function App() {4  const [cups, setCups] = useState("3");5 6  return (7    <div>8      <input type="number" value={cups} onChange={(e) => setCups(e.target.value)} />9      <p>With one more for a friend: {Number(cups) + 1}</p>10    </div>11  );12}

1import { useState } from "react";2 3export default function App() {4  const [milk, setMilk] = useState(false);5 6  return (7    <div>8      <label>9        <input type="checkbox" checked={milk} onChange={(e) => setMilk(e.target.value)} />10        Add milk11      </label>12      <p>milk is {String(milk)}</p>13    </div>14  );15}

1import { useState } from "react";2 3export default function App() {4  const [milk, setMilk] = useState(false);5 6  return (7    <div>8      <label>9        <input type="checkbox" checked={milk} onChange={(e) => setMilk(e.target.checked)} />10        Add milk11      </label>12      <p>milk is {String(milk)}</p>13    </div>14  );15}

1export default function App() {2  return (3    <div>4      <label>5        Size{" "}6        <select defaultValue="small">7          <option value="small">Small</option>8          <option value="large">Large</option>9        </select>10      </label>11      <p>Small: $3</p>12    </div>13  );14}

1import { useState } from "react";2 3const prices = { small: 3, large: 5 };4 5export default function App() {6  const [size, setSize] = useState("small");7 8  return (9    <div>10      <label>11        Size{" "}12        <select value={size} onChange={(e) => setSize(e.target.value)}>13          <option value="small">Small</option>14          <option value="large">Large</option>15        </select>16      </label>17      <p>{size === "small" ? "Small" : "Large"}: ${prices[size]}</p>18    </div>19  );20}

1import { useState } from "react";2 3export default function App() {4  const [address, setAddress] = useState({});5 6  return (7    <div>8      <label>9        City{" "}10        <input value={address.city} onChange={(e) => setAddress({ ...address, city: e.target.value })} />11      </label>12      <p>Deliver to: {address.city || "no city yet"}</p>13    </div>14  );15}

1import { useState } from "react";2 3export default function App() {4  const [address, setAddress] = useState({ city: "" });5 6  return (7    <div>8      <label>9        City{" "}10        <input value={address.city} onChange={(e) => setAddress({ ...address, city: e.target.value })} />11      </label>12      <p>Deliver to: {address.city || "no city yet"}</p>13    </div>14  );15}

1import { useState } from "react";2 3export default function App() {4  const [picked, setPicked] = useState("");5 6  function handleSubmit(e) {7    e.preventDefault();8    const formData = new FormData(e.currentTarget);9    setPicked(formData.get("teas"));10  }11 12  return (13    <form onSubmit={handleSubmit}>14      <label><input type="checkbox" name="teas" value="green" /> Green</label>15      <label><input type="checkbox" name="teas" value="black" /> Black</label>16      <label><input type="checkbox" name="teas" value="chai" defaultChecked /> Chai</label>17      <button>Save</button>18      {picked && <p>You picked: {picked}</p>}19    </form>20  );21}

1import { useState } from "react";2 3export default function App() {4  const [picked, setPicked] = useState("");5 6  function handleSubmit(e) {7    e.preventDefault();8    const formData = new FormData(e.currentTarget);9    setPicked(formData.getAll("teas").join(", "));10  }11 12  return (13    <form onSubmit={handleSubmit}>14      <label><input type="checkbox" name="teas" value="green" /> Green</label>15      <label><input type="checkbox" name="teas" value="black" /> Black</label>16      <label><input type="checkbox" name="teas" value="chai" defaultChecked /> Chai</label>17      <button>Save</button>18      {picked && <p>You picked: {picked}</p>}19    </form>20  );21}

1import { useState } from "react";2 3export default function App() {4  const [email, setEmail] = useState("");5  const error = email.includes("@") ? "" : "Enter an email with an @.";6 7  return (8    <div>9      <label>10        Email{" "}11        <input value={email} onChange={(e) => setEmail(e.target.value)} />12      </label>13      {error && <p>{error}</p>}14    </div>15  );16}

1import { useState } from "react";2 3export default function App() {4  const [email, setEmail] = useState("");5  const [touched, setTouched] = useState(false);6  const error = email.includes("@") ? "" : "Enter an email with an @.";7 8  return (9    <div>10      <label>11        Email{" "}12        <input value={email} onChange={(e) => setEmail(e.target.value)} onBlur={() => setTouched(true)} />13      </label>14      {touched && error && <p>{error}</p>}15    </div>16  );17}

Check your understanding

For each code question, find what the field gives onChange or FormData, then follow it to the screen. Press Edit & run on a question's code to check your answer.

Key takeaways

• A controlled field gets value (or checked) from state, and onChange sets that state on every key. The field shows only what state holds, so your code can change what's typed.
• Text boxes, number boxes, menus, and text areas use value and e.target.value, always a string. Checkboxes use checked and e.target.checked. Radio buttons are checked when their value matches.
• Start every controlled field with a real value, like "" or false. A value that starts as undefined makes React warn when it becomes text.
• An uncontrolled field keeps its own value from defaultValue. Read the whole form on submit with new FormData(e.currentTarget): named fields only, and unticked boxes are left out.
• Work errors out from the values on every render, and choose when they show: on submit, on blur, or while typing. The browser's required and type checks help too, and the server checks again.
• Join every field to a <label>, by nesting it or with htmlFor and useId, and point errors at it with aria-describedby.

Coming next: Form actions. React 19 lets a form call a function with its FormData, shows a waiting state while it runs, and empties the form when it's done.