[cpruijsen]

Do not paste this section header. Paste from Title down.

---

Title: Prevent Checkbox from submitting forms when given a type prop

Description

Checkbox is a styled Radix checkbox primitive: a <button> plus a hidden bubble <input type="checkbox">. Spreading a native-input type (for example Conform's getInputProps(field, { type: "checkbox" })) forwarded type="checkbox" onto the button. Browsers treat that invalid button type as submit, so clicking the checkbox submitted the enclosing form.

The trigger now always renders type="button", after the leftover-prop spread, the same way this component already forces asChild={false}. type is omitted from the public prop type so it is not part of the documented API. A spread from an untyped or wider object is still ignored at runtime.

What I chose: ignore/override type on the button rather than forwarding it to the hidden input.

Alternative: apply type to the bubble input, as suggested on #711.

Why: that input is already type="checkbox" inside @radix-ui/react-checkbox and is not exposed by Themes. Forwarding it would require forking the primitive, and for the reported type: "checkbox" case it would not change anything.

Happy to lock Switch / CheckboxGroup.Item / CheckboxCards.Item / RadioGroup.Item the same way if you want one PR to cover every button-based form control. I left those alone as out of scope for #711.

Testing steps

1. Open /test/checkbox-type in the playground.
2. Confirm the checkbox control is a button with type="button" (not "checkbox" / "submit").
3. Click the checkbox: it should check and the submit count should stay 0.
4. Click Submit: the count should become 1.
5. From apps/playground: pnpm exec playwright test tests/checkbox.spec.ts --project=chromium.

Relates issues / PRs

• Setting a "type" prop on Checkbox can break forms #711

[vercel]

@cpruijsen is attempting to deploy a commit to the WorkOS Team on Vercel.

A member of the Team first needs to authorize it.

[cpruijsen]

Going to close this. Not planning to keep it rebased.