Creating Custom Checkboxes in React

Understanding Default and Custom Checkboxes in React

Checkboxes are control elements that allow users to toggle between true and false states. In HTML, checkboxes have default styles applied to them, which can vary across browsers. To ensure consistency in appearance, we may want to create custom checkboxes.

Using Controlled Inputs for Form Controls in React

In React, form controls, including checkboxes, must be either controlled or uncontrolled inputs. Controlled inputs allow us to manage the state of the input, whereas uncontrolled inputs rely on the DOM. It is recommended to use controlled inputs for form controls.

Creating a Checkbox Component

Let’s start by creating a Checkbox component that accepts a label text as a prop and renders a checkbox alongside the text.

import React from 'eact';

const Checkbox = ({ label }) => {
  return (
    <div>
      <input type="checkbox" />
      <span>{label}</span>
    </div>
  );
};

export default Checkbox;

Controlling the Input Checkbox

To make the checkbox a controlled input, we need to add a component state to manage the user’s input. We’ll use the useState hook to initialize the state and update it when the user interacts with the checkbox.

import React, { useState } from 'eact';

const Checkbox = ({ label }) => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleCheckboxChange}
      />
      <span>{label}</span>
    </div>
  );
};

export default Checkbox;

Styling the Checkbox

To give our checkbox a custom look, we can use CSS to style the input element. We’ll use the appearance property to remove the default styles and add our own custom styles.

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

.checkbox:checked {
  background-color: #007bff;
  border-color: #007bff;
}

Using the :checked Selector

Instead of adding a custom class to the input element, we can use the :checked selector to target the checked state of the checkbox.

.checkbox:checked {
  background-color: #007bff;
  border-color: #007bff;
}

Handling Multiple Checkboxes

When handling multiple checkboxes, we can use an array to store the state of each checkbox. We’ll use the useState hook to initialize the array and update it when the user interacts with each checkbox.

import React, { useState } from 'eact';

const CheckboxGroup = () => {
  const [checkboxes, setCheckboxes] = useState([
    { id: 1, isChecked: false },
    { id: 2, isChecked: false },
    { id: 3, isChecked: false },
  ]);

  const handleCheckboxChange = (id) => {
    setCheckboxes(
      checkboxes.map((checkbox) =>
        checkbox.id === id? {...checkbox, isChecked:!checkbox.isChecked } : checkbox
      )
    );
  };

  return (
    <div>
      {checkboxes.map((checkbox) => (
        <div key={checkbox.id}>
          <input
            type="checkbox"
            checked={checkbox.isChecked}
            onChange={() => handleCheckboxChange(checkbox.id)}
          />
          <span>Checkbox {checkbox.id}</span>
        </div>
      ))}
    </div>
  );
};

export default CheckboxGroup;