Handling checkboxes and radio buttons in React

Introduction

Checkboxes and radio buttons let users pick options. Handling them means your app knows what the user chose.

When you want users to select one or more options from a list.

When you need to update your app instantly based on user choices.

When building forms that require user preferences or settings.

When you want to show or hide parts of the page based on selections.

Syntax

React

const [value, setValue] = useState(false);

// For checkbox
<input type="checkbox" checked={value} onChange={e => setValue(e.target.checked)} />

// For radio button
const [selected, setSelected] = useState('option1');
<input type="radio" name="options" value="option1" checked={selected === 'option1'} onChange={e => setSelected(e.target.value)} />

Use checked to control if the box or button is selected.

Use onChange to update state when user clicks.

Examples

This example shows a single checkbox that toggles true or false.

React

const [isChecked, setIsChecked] = useState(false);

<input type="checkbox" checked={isChecked} onChange={e => setIsChecked(e.target.checked)} />

This example shows two radio buttons where only one can be selected at a time.

React

const [selectedOption, setSelectedOption] = useState('option1');

<input type="radio" name="options" value="option1" checked={selectedOption === 'option1'} onChange={e => setSelectedOption(e.target.value)} /> Option 1
<input type="radio" name="options" value="option2" checked={selectedOption === 'option2'} onChange={e => setSelectedOption(e.target.value)} /> Option 2

This example manages multiple checkboxes using an object in state.

React

const [checkedItems, setCheckedItems] = useState({ item1: false, item2: false });

<input type="checkbox" checked={checkedItems.item1} onChange={e => setCheckedItems(prev => ({ ...prev, item1: e.target.checked }))} /> Item 1
<input type="checkbox" checked={checkedItems.item2} onChange={e => setCheckedItems(prev => ({ ...prev, item2: e.target.checked }))} /> Item 2

Sample Program

This React component lets users pick if they want a newsletter and choose a favorite color. It updates the page instantly to show their choices. It uses accessible labels and live region for screen readers.

React

import React, { useState } from 'react';

export default function Preferences() {
  const [newsletter, setNewsletter] = useState(false);
  const [color, setColor] = useState('red');

  return (
    <main>
      <h1>Choose your preferences</h1>
      <label>
        <input
          type="checkbox"
          checked={newsletter}
          onChange={e => setNewsletter(e.target.checked)}
          aria-checked={newsletter}
          aria-label="Subscribe to newsletter"
        />
        Subscribe to newsletter
      </label>
      <fieldset>
        <legend>Pick your favorite color</legend>
        <label>
          <input
            type="radio"
            name="color"
            value="red"
            checked={color === 'red'}
            onChange={e => setColor(e.target.value)}
            aria-checked={color === 'red'}
          />
          Red
        </label>
        <label>
          <input
            type="radio"
            name="color"
            value="blue"
            checked={color === 'blue'}
            onChange={e => setColor(e.target.value)}
            aria-checked={color === 'blue'}
          />
          Blue
        </label>
      </fieldset>
      <section aria-live="polite">
        <p>Newsletter subscription: {newsletter ? 'Yes' : 'No'}</p>
        <p>Favorite color: {color}</p>
      </section>
    </main>
  );
}

Important Notes

Always use checked and onChange together to control inputs.

Use name attribute for radio buttons to group them properly.

Adding aria-checked and labels improves accessibility for screen readers.

Summary

Checkboxes let users pick multiple options; radio buttons let them pick one.

Use React state to track if boxes or buttons are selected.

Update state on onChange to keep UI and data in sync.

Practice

1. Which statement best describes the difference between checkboxes and radio buttons in React?

easy

A. Both checkboxes and radio buttons allow only one selection.

B. Checkboxes allow only one selection; radio buttons allow multiple selections.

C. Both checkboxes and radio buttons allow multiple selections.

D. Checkboxes allow multiple selections; radio buttons allow only one selection.

Solution

1. Step 1: Understand checkbox behavior

   Checkboxes let users select any number of options, including none, one, or many.

2. Step 2: Understand radio button behavior

   Radio buttons restrict selection to exactly one option within a group.

3. Final Answer:

   Checkboxes allow multiple selections; radio buttons allow only one selection. -> Option D

4. Quick Check:

   Checkboxes = multiple, Radio buttons = single [OK]

Hint: Checkboxes = many choices, radios = one choice [OK]

Common Mistakes:

• Confusing which input allows multiple selections
• Thinking radio buttons allow multiple selections
• Assuming checkboxes allow only one selection

2. Which of the following is the correct way to handle a checkbox change event in React functional components?

easy

A. <input type='checkbox' checked={checked} onClick={e => setChecked(e.target.checked)} />

B. <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.checked)} />

C. <input type='checkbox' value={checked} onChange={e => setChecked(e.target.checked)} />

D. <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.value)} />

Solution

1. Step 1: Use checked attribute for checkbox state

   Checkbox uses checked prop to reflect its state, not value.

2. Step 2: Use onChange event and e.target.checked

   The onChange event provides e.target.checked boolean to update state.

3. Final Answer:

   <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.checked)} /> -> Option B

4. Quick Check:

   Checkbox state = checked + onChange with e.target.checked [OK]

Hint: Use checked and onChange with e.target.checked [OK]

Common Mistakes:

• Using e.target.value instead of e.target.checked
• Using onClick instead of onChange for checkbox
• Binding value instead of checked attribute

3. What will be the output when the following React component is rendered and the user selects the "Option 2" radio button?

function RadioGroup() {
  const [selected, setSelected] = React.useState('');
  return (
    <div>
      <input type='radio' name='group' value='1' checked={selected === '1'} onChange={e => setSelected(e.target.value)} /> Option 1
      <input type='radio' name='group' value='2' checked={selected === '2'} onChange={e => setSelected(e.target.value)} /> Option 2
      <p>Selected: {selected}</p>
    </div>
  );
}

medium

A. Selected: 2

B. Selected: '' (empty string)

C. Selected: 1

D. No output, component crashes

Solution

1. Step 1: Initial state is empty string

   The state selected starts as empty string, so no radio is checked initially.

2. Step 2: User selects "Option 2" radio

   On selecting "Option 2", onChange sets selected to '2'.

3. Step 3: Component re-renders showing selected value

   The paragraph shows Selected: 2 because state updated to '2'.

4. Final Answer:

   Selected: 2 -> Option A

5. Quick Check:

   Radio selected value updates state and display [OK]

Hint: Radio updates state with value, display shows selected [OK]

Common Mistakes:

• Assuming state remains empty after selection
• Confusing checked with value attribute
• Expecting multiple radios to be selected

4. Identify the error in this React checkbox handler code:

function Checkbox() {
  const [checked, setChecked] = React.useState(false);
  return (
    <input type='checkbox' checked={checked} onChange={e => setChecked(e.target.value)} />
  );
}

medium

A. Using e.target.value instead of e.target.checked in onChange

B. Missing initial state for checked

C. Using onClick instead of onChange event

D. Not binding the checked attribute

Solution

1. Step 1: Check event handler usage

   The onChange handler uses e.target.value, which is a string, not boolean.

2. Step 2: Correct property for checkbox state

   Checkbox state must use e.target.checked which is boolean true/false.

3. Final Answer:

   Using e.target.value instead of e.target.checked in onChange -> Option A

4. Quick Check:

   Checkbox onChange must use e.target.checked [OK]

Hint: Checkbox onChange uses e.target.checked, not value [OK]

Common Mistakes:

• Using e.target.value for checkbox state
• Confusing onClick with onChange
• Not initializing state properly

5. You want to create a React component that lets users select multiple toppings using checkboxes and shows the selected toppings below. Which approach correctly manages multiple checkbox states?

hard

A. Use separate state variables for each checkbox and ignore updating the UI on change.

B. Use a single boolean state for all checkboxes and toggle it on any change.

C. Use an array state to store selected toppings and update it by adding/removing toppings on checkbox changes.

D. Use a string state to store all toppings concatenated and update it by appending toppings on change.

Solution

1. Step 1: Understand multiple checkbox state needs

   Multiple checkboxes require tracking which items are selected, best done with an array.

2. Step 2: Update array state on checkbox toggle

   On change, add topping if checked, remove if unchecked, keeping UI in sync.

3. Final Answer:

   Use an array state to store selected toppings and update it by adding/removing toppings on checkbox changes. -> Option C

4. Quick Check:

   Multiple checkboxes = array state with add/remove [OK]

Hint: Use array state to track multiple checkbox selections [OK]

Common Mistakes:

• Using single boolean for multiple checkboxes
• Not updating UI after state change
• Concatenating strings instead of using arrays