Guided Notes

Forms

Controlled inputs, submitting, multiple fields, textarea, select, checkboxes, and radios.

Controlled components

Slide 1 / 5

In React, a form field's value usually lives in state. The input shows the state, and every keystroke updates it:

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

<input value={name} onChange={(e) => setName(e.target.value)} />

This is a controlled component: React state is the single source of truth. You can read name anywhere, validate as the user types, or reset the form with setName("").

A value without onChange makes the field read-only (React warns you).

← Lists & Keys