Checkbox does not toggle when wrapping <Field/> is clicked

[romankoho]

Version:
@headlessui/react": "^2.2.7"

I am rendering a <Checkbox/> with <Label/> - both within a <Field/> component.
The Field has a padding. Between the checkbox and the label is a gap (flexbox).

My problem:
The checkbox only gets toggled, if I click exactly on the Checkbox or Label area but it does not change when I click the padding area of the <Field/>. Is this a bug or intended and could I somehow change this behavior?

interface CheckboxProps {
  renderLabel?: () => ReactNode
  defaultChecked?: boolean
  disabled?: boolean
  checked?: boolean
  onChange?: (state: boolean) => void
}

    <Field className={'flex items-center justify-start gap-2 rounded-md cursor-pointer transition-colors duration-300 px-4 py-2'}>
      <Checkbox
        defaultChecked={defaultChecked}
        checked={checked}
        disabled={disabled}
        onChange={handleChange}
        as={'div'}
        className={'focus:outline-none'}
      >
        {({ checked, disabled }) => (
          <div>
            {checked ? (
              <CheckSquareIcon weight={'fill'} className={'size-5'} />
            ) : (
              <SquareIcon className={'size-5'} />
            )}
          </div>
        )}
      </HeadlessUICheckbox>
      {renderLabel && <Label className={'truncate select-none cursor-pointer text-sm font-medium whitespace-nowrap'}</Label>}
    </Field>

Clicking in the green are (padding of <Field/>) does not work (also not the gap of the Flexbox). I have to exactly hit the icon or label. I want the whole element to be clickable.

[manimovassagh]

The <Field> component in Headless UI does not act as a clickable wrapper for the <Checkbox> — it is a grouping/layout component that associates labels, descriptions, and inputs semantically but does not forward click events to the checkbox.

The reason clicking on the <Label> works is that Headless UI wires up the label to toggle the checkbox internally (similar to how a native <label> works with for). But the padding/gap area of <Field> is just a <div> — there is no click handler on it.

The simplest fix is to wrap the whole thing in a clickable element yourself:

<Field
  className="flex items-center justify-start gap-2 rounded-md cursor-pointer transition-colors duration-300 px-4 py-2"
  onClick={() => handleChange(!checked)}
>
  <Checkbox
    defaultChecked={defaultChecked}
    checked={checked}
    disabled={disabled}
    onChange={handleChange}
    as="div"
    className="focus:outline-none"
  >
    {({ checked, disabled }) => (
      <div>
        {checked ? (
          <CheckSquareIcon weight="fill" className="size-5" />
        ) : (
          <SquareIcon className="size-5" />
        )}
      </div>
    )}
  </Checkbox>
  {renderLabel && (
    <Label className="truncate select-none cursor-pointer text-sm font-medium whitespace-nowrap">
      {renderLabel()}
    </Label>
  )}
</Field>

Alternatively, you could use a native <label> as the outer element instead of relying on <Field>, since a <label> natively forwards clicks to its associated input:

<label className="flex items-center justify-start gap-2 rounded-md cursor-pointer transition-colors duration-300 px-4 py-2">
  <Checkbox
    checked={checked}
    onChange={handleChange}
    as="div"
    className="focus:outline-none"
  >
    {({ checked }) => (
      <div>
        {checked ? <CheckSquareIcon weight="fill" className="size-5" /> : <SquareIcon className="size-5" />}
      </div>
    )}
  </Checkbox>
  <span className="truncate select-none text-sm font-medium whitespace-nowrap">
    {renderLabel?.()}
  </span>
</label>

This is intended behavior — <Field> is for structure and accessibility grouping, not for acting as a click target.