Select, checkbox, and radio inputs

What this means

React can control many input types. A select uses value, a checkbox often uses checked, and radio buttons share a name but use different values.

In beginner terms, this topic answers one practical question: "What should I write, and why does React care about it?" Do not try to memorize the syntax first. First understand the idea, then connect the syntax to that idea.

Why it matters

Real forms need choices, toggles, and yes/no states. These inputs still follow the same main idea: React state holds the current value.

When you build real React screens, this idea helps you decide where data should live, what the user should see, and what should happen after an interaction. That is why this lesson is part of the main path instead of being an optional detail.

Step by step

1. Notice the UI problem this topic solves. 2. Look at the smallest possible example. 3. Change one value and predict what should appear. 4. Run the example and compare the result with your prediction. 5. Use the practice task before moving on.

Small example

<input type="checkbox" checked={agreed} onChange={(event) => setAgreed(event.target.checked)} />

Common mistake

Do not read checkbox state from event.target.value. For checkboxes, use event.target.checked.

Practice task

Create a checkbox for I understand props and show a message only when it is checked.

Remember this

Different inputs use different event fields, but state is still the source of truth.