Forms in React

React works with native forms rather than replacing them. Keep labels, input types, keyboard submission, and built-in constraints.

A controlled field

01function SearchForm() {
02  const [query, setQuery] = useState("");
03  return <form onSubmit={(event) => { event.preventDefault(); runSearch(query); }}>
04    <label htmlFor="query">Search lessons</label>
05    <input id="query" name="query" value={query} onChange={(event) => setQuery(event.target.value)} />
06    <button type="submit">Search</button>
07  </form>;
08}

Controlled inputs take their current value from state. Uncontrolled inputs with defaultValue and FormData can be simpler when live state is unnecessary.

Validation feedback

Use native constraints first, validate again in the submit action or server, and connect custom error text with aria-describedby and aria-invalid.

Keep this

Preserve native form behavior, choose controlled state only when useful, and make errors specific, connected, and recoverable.