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.