React Checkboxes & Radio Buttons

Checkboxes and radio buttons allow users to select options. In React, these can be controlled (bound to state) or uncontrolled (using refs), just like text inputs and select dropdowns.

Using React state is recommended for dynamic forms and validation.

Checkboxes in React

Checkboxes allow multiple selections. The value is usually stored in an array.

Example – Controlled Checkbox

import React, { useState } from "react";

function CheckboxExample() {
  const [selectedHobbies, setSelectedHobbies] = useState([]);

  const handleChange = (e) => {
    const { value, checked } = e.target;

    if (checked) {
      // Add the selected value
      setSelectedHobbies([...selectedHobbies, value]);
    } else {
      // Remove the unchecked value
      setSelectedHobbies(selectedHobbies.filter((hobby) => hobby !== value));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Selected Hobbies: ${selectedHobbies.join(", ")}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <inputtype="checkbox"
          value="Reading"
          onChange={handleChange}
          checked={selectedHobbies.includes("Reading")}
        />
        Reading
      </label>
      <br />
      <label>
        <inputtype="checkbox"
          value="Traveling"
          onChange={handleChange}
          checked={selectedHobbies.includes("Traveling")}
        />
        Traveling
      </label>
      <br />
      <label>
        <inputtype="checkbox"
          value="Cooking"
          onChange={handleChange}
          checked={selectedHobbies.includes("Cooking")}
        />
        Cooking
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default CheckboxExample;

• checked={selectedHobbies.includes("Reading")} ensures the checkbox reflects the state.
• handleChange dynamically adds or removes items from the state array.
• Multiple selections are allowed.

Radio Buttons in React

Radio buttons allow only one selection from a group. The value is stored as a single string in state.

Example – Controlled Radio Buttons

import React, { useState } from "react";

function RadioExample() {
  const [gender, setGender] = useState("");

  const handleChange = (e) => {
    setGender(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Selected Gender: ${gender}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <inputtype="radio"
          name="gender"
          value="Male"
          checked={gender === "Male"}
          onChange={handleChange}
        />
        Male
      </label>
      <br />
      <label>
        <inputtype="radio"
          name="gender"
          value="Female"
          checked={gender === "Female"}
          onChange={handleChange}
        />
        Female
      </label>
      <br />
      <label>
        <inputtype="radio"
          name="gender"
          value="Other"
          checked={gender === "Other"}
          onChange={handleChange}
        />
        Other
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default RadioExample;

• All radio buttons share the same name attribute.
• Only one can be selected at a time.
• State stores the selected value as a single string.

Key Points for Checkboxes & Radio Buttons

Feature	Checkbox	Radio Button
Selection	Multiple allowed	Only one allowed
State Representation	Array of selected values	Single string
checked attribute	checked={array.includes(value)}	checked={state === value}
Event Handling	onChange adds/removes values in array	onChange sets the state string

Dynamic Options Example

You can generate checkboxes or radio buttons from an array of options:

This makes your form scalable and maintainable.

const hobbies = ["Reading", "Traveling", "Cooking"];
hobbies.map((hobby) => (
  <label key={hobby}>
    <inputtype="checkbox"
      value={hobby}
      checked={selectedHobbies.includes(hobby)}
      onChange={handleChange}
    />
    {hobby}
  </label>
));