Checkbox

Checkbox.tsx

import React, { useState } from "react";
import "./Checkbox.css";

interface CheckboxProps {
  label: string;
  defaultChecked?: boolean;
  onChange?: (checked: boolean) => void;
}

const Checkbox = ({
  label,
  defaultChecked = false,
  onChange = () => {},
}: CheckboxProps) => {
  const [checked, setChecked] = useState(defaultChecked);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const isChecked = e.target.checked;
    setChecked(isChecked);
    onChange(isChecked);
  };

  return (
    <div className="checkbox">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className="checkboxInput"
      />
      <label className="checkboxLabel">{label}</label>
    </div>
  );
};

export default Checkbox;

Checkbox.module.css

.checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8px;
}

.checkboxInput {
  margin-right: 8px;
  cursor: pointer;
}

.checkboxLabel {
  cursor: pointer;
}