Skip to content

CheckboxGroup reset fails to uncheck all boxes simultaneously #7749

Open
@zaru

Description

@zaru

Provide a general summary of the issue here

The CheckboxGroup form reset does not work as expected. When multiple checkboxes are checked and the form is reset, the checkboxes are cleared one by one instead of all at once, as seen with native HTML <input type="checkbox"> elements. I want to reset the form content using either or React’s provided requestFormReset, but neither is working.

2025-02-09.19.59.49.mov

I confirmed that in react-aria-components version 1.1.0, all checkboxes were reset correctly. However, in version 1.2.0 and later, only one checkbox is reset at a time.

🤔 Expected Behavior?

When the form is reset, all checkboxes in the CheckboxGroup should be unchecked simultaneously, matching the behavior of native HTML checkboxes.

😯 Current Behavior

Currently, if you check several checkboxes in a CheckboxGroup and then trigger a form reset, the checkboxes are cleared one at a time rather than all at once. In contrast, native HTML checkboxes (e.g., <input type="checkbox"> ) remove all checks immediately when the form is reset.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/ecstatic-bird-p2n2r5?file=%2Fsrc%2FApp.js

export const Example = (args: any) => (
  <Form>
    <CheckboxGroup  name="sample">
      <Checkbox value="soccer">Soccer</Checkbox>
      <Checkbox value="baseball">Baseball</Checkbox>
      <Checkbox value="basketball">Basketball</Checkbox>
    </CheckboxGroup>

    <div>
      <input type="checkbox" name="sample" value="1" /> native checkbox
    </div>
    <div>
      <input type="checkbox" name="sample" value="2" /> native checkbox
    </div>
    <div>
      <input type="checkbox" name="sample" value="3" /> native checkbox
    </div>

    <button type="reset">Reset</button>
  </Form>
);

Version

1.6.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions