React Checkbox

React Checkbox

Checkboxes in React are handled differently from text inputs. A text field usually gives you a string through e.target.value, but a checkbox gives you a boolean through e.target.checked.

That small difference matters because React forms are usually built around controlled components, where the checked prop comes from state.

Managing Checkbox State

import { useState } from 'react';

function CheckboxForm() {
  const [isChecked, setIsChecked] = useState(false);
  return <input type="checkbox" checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)} />;
}

Multiple Checkboxes

When you have several checkboxes, store the selected values in an array.

import { useState } from 'react';

function NewsletterTopics() {
  const [topics, setTopics] = useState(['react']);

  const toggleTopic = (topic) => {
    setTopics((currentTopics) =>
      currentTopics.includes(topic)
        ? currentTopics.filter((item) => item !== topic)
        : [...currentTopics, topic]
    );
  };

  return (
    <label>
      <input
        type="checkbox"
        checked={topics.includes('react')}
        onChange={() => toggleTopic('react')}
      />
      React tutorials
    </label>
  );
}

Common Mistakes

• Using value instead of checked for a boolean checkbox.
• Forgetting to update state on every change.
• Mixing controlled and uncontrolled patterns in the same form.

When To Use This Pattern

Use controlled checkboxes when the checked state matters to your UI, form validation, or submit handler. That keeps the source of truth in React state and makes the form easier to debug.