React Foundations·Components, state and data

Forms, lists and accessibility

Controlled inputs keep form state predictable and labels usable.

Intermediate 13 min read Lesson 9 of 300 Challenge included

What you will be able to do

Connect every input to a label with htmlFor and id.
Use a form submit handler instead of click-only buttons.
Show validation messages near the field and connect them with aria-describedby.

In plain English

A controlled input receives its value from state and reports changes back. Lists should be rendered from data with stable keys. Accessibility is part of the component contract: label every control and preserve keyboard behaviour.

SearchForm.jsxJSX

function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('')

  function submit(event) {
    event.preventDefault()
    onSearch(query.trim())
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="query">Search lessons</label>
      <input
        id="query"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  )
}

Your turn

Validate an email field

Medium

Add an email input with a label and a short error message shown when the value does not contain @.

JSX · starter

const [email, setEmail] = useState('')
// add a labelled input and error

Check your understanding before moving on.

Knowledge checkQuestion 1

What makes an input controlled in React?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Routing and application structure

Lesson 9 of 300 · 0% of course