Can I make the children of the Checkbox not activate the checkbox?

[WilliamHartman]

I am using this for a ToS checkbox. The user clicks on the text in the children of the Checkbox to open a modal for the user to read. This works, however clicking on the text will check the box. I want the box to only be checked/unchecked when clicking the box itself, not the text or label. Is that possible?

[manimovassagh]

Yes — the trick is to stop the click event from propagating to the Checkbox.Root when the user clicks the text/link.

Wrap your clickable text content so that it stops propagation:

<Checkbox.Root>
  <Checkbox.Indicator />
  <span
    onClick={(e) => {
      e.stopPropagation();
      // open your ToS modal here
      setShowModal(true);
    }}
  >
    I agree to the <a href="#">Terms of Service</a>
  </span>
</Checkbox.Root>

Alternatively, if you want a cleaner separation, do not put the text inside Checkbox.Root at all. Use a <label> that only wraps the checkbox indicator, and place the text outside:

<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
  <Checkbox.Root id="tos">
    <Checkbox.Indicator />
  </Checkbox.Root>
  <span>
    I agree to the{" "}
    <button onClick={() => setShowModal(true)}>Terms of Service</button>
  </span>
</div>

This way clicking the text never reaches the checkbox. The checkbox only toggles when you click directly on it.

The key insight is that Radix's Checkbox.Root acts like a <label> — any click inside its children toggles the state. So either stop propagation or move the interactive content outside the Root.