React Checkbox

Working with checkboxes in React applications

☑️ What are Checkboxes?

Checkboxes let users select multiple options from a list. In React, checkboxes are controlled components that use state to track whether they're checked or unchecked. 


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

Understanding Checkboxes

Checkboxes are essential form elements that allow users to make binary choices or select multiple items. React handles checkboxes differently from regular text inputs, using the checked property instead of value to control their state.

✅

Single Checkbox

Toggle true/false values

📋

Multiple Checkboxes

Select multiple options

🎯

Controlled Component

React manages checkbox state

🔄

Dynamic Lists

Generate checkboxes from data

🔹 Single Checkbox

The simplest checkbox implementation uses a boolean state: 

import { useState } from 'react';

function TermsCheckbox() {
  const [agreed, setAgreed] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        />
        I agree to the terms and conditions
      </label>
      <p>Status: {agreed ? 'Agreed' : 'Not agreed'}</p>
      <button disabled={!agreed}>Submit</button>
    </div>
  );
}

Output:

Status: Not agreed

🔹 Multiple Checkboxes

Handle multiple checkboxes using an array to store selected values: 

import { useState } from 'react';

function HobbiesSelector() {
  const [hobbies, setHobbies] = useState([]);

  const handleChange = (hobby) => {
    if (hobbies.includes(hobby)) {
      setHobbies(hobbies.filter(h => h !== hobby));
    } else {
      setHobbies([...hobbies, hobby]);
    }
  };

  return (
    <div>
      <h3>Select your hobbies:</h3>
      <label>
        <input
          type="checkbox"
          checked={hobbies.includes('Reading')}
          onChange={() => handleChange('Reading')}
        />
        Reading
      </label>
      <label>
        <input
          type="checkbox"
          checked={hobbies.includes('Gaming')}
          onChange={() => handleChange('Gaming')}
        />
        Gaming
      </label>
      <label>
        <input
          type="checkbox"
          checked={hobbies.includes('Cooking')}
          onChange={() => handleChange('Cooking')}
        />
        Cooking
      </label>
      <p>Selected: {hobbies.join(', ') || 'None'}</p>
    </div>
  );
}

Output:

Select your hobbies:

Selected: None

🔹 Dynamic Checkbox List

Generate checkboxes from an array of data: 

import { useState } from 'react';

function SkillsSelector() {
  const skills = ['JavaScript', 'React', 'CSS', 'Node.js'];
  const [selected, setSelected] = useState([]);

  const toggleSkill = (skill) => {
    setSelected(prev =>
      prev.includes(skill)
        ? prev.filter(s => s !== skill)
        : [...prev, skill]
    );
  };

  return (
    <div>
      {skills.map(skill => (
        <label key={skill}>
          <input
            type="checkbox"
            checked={selected.includes(skill)}
            onChange={() => toggleSkill(skill)}
          />
          {skill}
        </label>
      ))}
      <p>You selected {selected.length} skill(s)</p>
    </div>
  );
}

Key Concepts:

  • Use checked prop instead of value
  • Access checkbox state with e.target.checked
  • Store multiple selections in an array
  • Use includes() to check if item is selected

🔹 Select All Checkbox

Implement a "Select All" feature for multiple checkboxes: 

import { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Buy groceries', done: false },
    { id: 2, text: 'Clean room', done: false },
    { id: 3, text: 'Study React', done: false }
  ]);

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };

  const toggleAll = () => {
    const allDone = todos.every(todo => todo.done);
    setTodos(todos.map(todo => ({ ...todo, done: !allDone })));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={todos.every(t => t.done)}
          onChange={toggleAll}
        />
        Select All
      </label>
      {todos.map(todo => (
        <label key={todo.id}>
          <input
            type="checkbox"
            checked={todo.done}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </label>
      ))}
    </div>
  );
}

🧠 Test Your Knowledge

Which prop controls whether a checkbox is checked in React?