[bug]: Checkbox resets its INTERNAL state in the form and delivers none to FormData after a button with formAction is clicked

[dimikot]

Describe the bug

Link to x-posted issue in radix-ui (not sure which repo should I post to): radix-ui/primitives#3444

Suppose we have a form with 1 checkbox and 1 button, and that button has a formAction handler. When clicking the button, the handler is fed with a FormData object. If we select the checkbox, the 1st click to the button delivers its state in that FormData.

But if we click the button the 2nd time, FormData is delivered empty. The same happens in onSubmit handler of the

itself. This is all despite the checkbox itself is still visually on.

This happens, because formAction on a button resets the form. So it implicitly resets all of the checkboxes in the form to their default state. But visually, nothing changes, since rendering of the Checkbox state is independent on the actual <input type="checkbox"/> state.

CleanShot.2025-04-04.at.16.15.57.mp4

Affected component/components

Checkbox

How to reproduce

"use client";

import { Button } from "@/components/ui/button.tsx";
import { Checkbox } from "@/components/ui/checkbox.tsx";
import { useState } from "react";

export default function Page() {
  const [checked, setChecked] = useState(false);
  console.log("Rendered as:", checked);
  return (
    <form className="m-10 flex flex-row items-center gap-2">
      <Checkbox
        name="checkbox"
        value="42"
        checked={checked}
        onClick={() => setChecked(!checked)}
      />
      <Button
        type="submit"
        formAction={(formData) => console.log(formData.getAll("checkbox"))}
      >
        Submit
      </Button>
    </form>
  );
}

Codesandbox/StackBlitz link

No response

Logs

System Info

| Software         | Name(s) | Version |
| ---------------- | ------- | ------- |
| Radix Package(s) |    @radix-ui/react-checkbox     |  1.1.4       |
| React            | ^19.0.0   |         |
| Browser          |   Chrome      |         |
| Assistive tech   |         |         |
| Node             | n/a     |         |
| npm/yarn         |         |         |
| Operating System |         |         |

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues