Checkboxes and Selects

A teacher chooses a class and ticks a student’s present box. Reading both controls as ordinary text would confuse a true-or-false attendance choice with a class name.

A controlled checkbox uses the boolean checked property and reads event.target.checked. A controlled select uses value and reads event.target.value. Each control reports a different kind of choice, so its state should reflect that choice.

Understand
Represent attendance with a boolean checked value.
Build
Control a class select with one matching option value.
Check
Describe initial defaults and later user changes accurately.

Different controls, explicit values

Checkbox
checked describes whether Ravi is present.
Select
value identifies the chosen class option.
Summary
The same state describes the attendance decision.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Use the property that means the choice

A checkbox is either checked or unchecked. Its value property is a separate submission value and does not tell you whether it is ticked. Reading checked gives a boolean that can directly support attendance descriptions and conditional markup. It remains a boolean even when the field’s label contains words.

A select chooses among option values. The label shown to the teacher and the stored value can differ: an option might show Class 7A while its value is 7A. Control selection on the select itself, rather than marking individual options with selected attributes. The application then has one clear selected value.

Choose a class and mark Ravi

The checkbox starts unchecked and the class select starts at 7A. The summary derives a sentence from those two states. Changing either control updates the same sentence. Both controls have explicit labels, so a teacher can click the checkbox label and assistive tools can identify the select.

React · JavaScript with JSX

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  const [className, setClassName] = useState('7A');
  return <main><h1>Attendance choice</h1>
    <label>Class <select value={className} onChange={event => setClassName(event.target.value)}>
      <option value="7A">Class 7A</option><option value="7B">Class 7B</option>
    </select></label>
    <label><input type="checkbox" checked={present} onChange={event => setPresent(event.target.checked)} />Ravi present</label>
    <p>{className}: Ravi is {present ? 'present' : 'absent'}</p>
  </main>;
}

Expected screen and behavior

Initially 7A is selected and Ravi is absent. Ticking Ravi present changes the summary to present. Choosing Class 7B changes its class prefix.

Keep the boolean and string distinct

React · Choose a class and mark Ravi

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  const [className, setClassName] = useState('7A');
  return <main><h1>Attendance choice</h1>
    <label>Class <select value={className} onChange={event => setClassName(event.target.value)}>
      <option value="7A">Class 7A</option><option value="7B">Class 7B</option>
    </select></label>
    <label><input type="checkbox" checked={present} onChange={event => setPresent(event.target.checked)} />Ravi present</label>
    <p>{className}: Ravi is {present ? 'present' : 'absent'}</p>
  </main>;
}

When the checkbox changes, event.target.checked is true or false. setPresent stores that boolean, and the conditional expression chooses the matching attendance word. When the select changes, event.target.value is a string such as 7B. setClassName stores that string and the summary receives a different class prefix.

Neither control needs an Effect to coordinate with its summary. The summary is derived during rendering. A multiple select has a different contract: its controlled value is an array of selected strings and the handler must collect selectedOptions. Do not apply this single-selection handler unchanged to a multiple-selection form.

Explain meaningful initial choices

A default of absent here means unchecked in this demonstration, not proof that Ravi missed school. A real register may need an unmarked stage before attendance is confirmed. A checkbox alone expresses two states, so a three-stage workflow might require a select or radio choices for unmarked, present and absent.

Select defaults should match an available option value. If no class is selected yet, include an explicit empty option and validate the selection when submitting. Keeping these states intentional prevents a teacher from mistaking a convenient default for a completed administrative decision.

Try the school task

React · starting example

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  const [className, setClassName] = useState('7A');
  return <main><h1>Attendance choice</h1>
    <label>Class <select value={className} onChange={event => setClassName(event.target.value)}>
      <option value="7A">Class 7A</option><option value="7B">Class 7B</option>
    </select></label>
    <label><input type="checkbox" checked={present} onChange={event => setPresent(event.target.checked)} />Ravi present</label>
    <p>{className}: Ravi is {present ? 'present' : 'absent'}</p>
  </main>;
}

Build a permission form with a controlled Trip permission checkbox. Display Permission received when checked and Permission missing otherwise. Add a Mark permission received button to demonstrate that application state, as well as direct checkbox interaction, can control the field.

Worked answer

The button stores true in the same permission state used by the checkbox. React then describes both a checked control and the received message. Unchecking the box returns the message to missing, proving that both kinds of interaction use the same owner.

React · JavaScript with JSX

import { useState } from 'react';
export default function App() {
  const [permission, setPermission] = useState(false);
  return <main><h1>School trip</h1>
    <label><input type="checkbox" checked={permission} onChange={event => setPermission(event.target.checked)} />Trip permission</label>
    <p>{permission ? 'Permission received' : 'Permission missing'}</p>
    <button onClick={() => setPermission(true)}>Mark permission received</button>
  </main>;
}

Expected screen and behavior

Initially permission is missing. Mark permission received checks the field and changes the message. Unchecking the field changes it back.

Mistakes and boundaries

Passing checked without a matching change handler makes the controlled checkbox effectively non-editable unless it is deliberately readOnly. Reading target.value for a tick can produce a string such as on instead of the intended boolean. That string may appear truthy even after the box is unchecked.

Do not assume a control’s visible text is what the server receives. Form submissions use names and values, and unchecked checkboxes are omitted from ordinary FormData. These examples describe local state; persistence and backend interpretation are separate requirements.

React · Choose a class and mark Ravi

import { useState } from 'react';
export default function App() {
  const [present, setPresent] = useState(false);
  const [className, setClassName] = useState('7A');
  return <main><h1>Attendance choice</h1>
    <label>Class <select value={className} onChange={event => setClassName(event.target.value)}>
      <option value="7A">Class 7A</option><option value="7B">Class 7B</option>
    </select></label>
    <label><input type="checkbox" checked={present} onChange={event => setPresent(event.target.checked)} />Ravi present</label>
    <p>{className}: Ravi is {present ? 'present' : 'absent'}</p>
  </main>;
}

Choose the answer that follows the data and the interaction, then read the explanation for each alternative.

Carry the idea forward

Choose checked for checkbox booleans and value for select choices. Be clear about what a default means in a school workflow. Continue with form validation to check that entered choices satisfy the task before saving them.

Read the primary reference: React: select reference.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Form Validation →

Checkboxes and Selects