How to make the label that wraps a button clickable too in React

Question

Having the following components:

  <CheckboxGroupLabel htmlFor={option.label}>
    <FormCheckbox
      onClick={() => onChange}
      key={option.label}
      defaultChecked={defaultChecked}
      {...rest}
    />
    {option.value}
  </CheckboxGroupLabel>

Their styled components are:

import styled from 'styled-components';
import * as Checkbox from '@radix-ui/react-checkbox';

export const CheckboxGroupLabel = styled.label`
  background-color: red;
  display: flex;
  width: 100%;
  margin: 18px;
  line-height: 20px;
  cursor: pointer;
  width: 100px;
`;

export const StyledCheckboxRoot = styled(Checkbox.Root)`
  button {
    all: unset;
  }
`;

So the checkbox is inside label but only checkbox is clickable, I would like to make the whole label clickable.

Is there a way to do that?

Answer 1

Have you tried just moving onClick into CheckboxGroupLabel?

https://codesandbox.io/s/label-onclick-3ebkbi

import "./styles.css";
import * as Checkbox from "@radix-ui/react-checkbox";
import { CheckIcon } from "@radix-ui/react-icons";

export default function MyComponent() {
  const onLabelClick = () => {
    console.log("clicked label");
  };
  return (
    <div>
      <label onClick={onLabelClick} htmlFor="mycheckbox">
        <Checkbox.Root className="checkbox" defaultChecked id="mycheckbox">
          <Checkbox.Indicator className="indicator">
            <CheckIcon />
          </Checkbox.Indicator>
          My checkbox label
        </Checkbox.Root>
      </label>
    </div>
  );
}