Provide a general summary of the issue here
Regression of #7749 (fixed in #8316): a form reset on a CheckboxGroup unchecks only one of several checked boxes.
🤔 Expected Behavior?
form.reset() restores the group's default value: every checkbox the user checked is unchecked at once, as with native <input type="checkbox">.
😯 Current Behavior
Observed in headless Chromium (Playwright), react-aria-components 1.20.0 / react-aria 3.51.0 / react-stately 3.49.0, React 19.2.7. Check "a" and "b" in a group with no default, then call form.reset():
| setup |
before reset |
after reset |
RAC CheckboxGroup + RAC Checkbox |
[a, b] |
[a] ❌ |
RAC CheckboxGroup + useCheckboxGroupItem |
[a, b] |
[a] ❌ |
💁 Possible Solution
Each checkbox registers its own reset listener, which calls its toggle state's setSelected(default); its onChange then calls state.removeValue(value) on the group. Several removals in the same reset appear to read the same group value, so only one survives. Resetting the group's value once (e.g. state.setValue(state.defaultValue) from a group-level listener) restores every box; that is what we use as a workaround.
🔦 Context
Found while migrating a design-system CheckboxGroup to react-aria. #8316 fixed this for 1.x in 2025; it fails again in 1.20.0.
🖥️ Steps to Reproduce
import { CheckboxGroup, Checkbox } from "react-aria-components";
export function Repro() {
return (
<form>
<CheckboxGroup aria-label="Letters" name="letters">
<Checkbox value="a">a</Checkbox>
<Checkbox value="b">b</Checkbox>
<Checkbox value="c">c</Checkbox>
</CheckboxGroup>
<button type="reset">Reset</button>
</form>
);
}
// Check a and b, press Reset → a stays checked.
Version
react-aria-components 1.20.0, react-aria 3.51.0, react-stately 3.49.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
Provide a general summary of the issue here
Regression of #7749 (fixed in #8316): a form reset on a
CheckboxGroupunchecks only one of several checked boxes.🤔 Expected Behavior?
form.reset()restores the group's default value: every checkbox the user checked is unchecked at once, as with native<input type="checkbox">.😯 Current Behavior
Observed in headless Chromium (Playwright), react-aria-components 1.20.0 / react-aria 3.51.0 / react-stately 3.49.0, React 19.2.7. Check "a" and "b" in a group with no default, then call
form.reset():CheckboxGroup+ RACCheckbox[a, b][a]❌CheckboxGroup+useCheckboxGroupItem[a, b][a]❌💁 Possible Solution
Each checkbox registers its own reset listener, which calls its toggle state's
setSelected(default); itsonChangethen callsstate.removeValue(value)on the group. Several removals in the same reset appear to read the same group value, so only one survives. Resetting the group's value once (e.g.state.setValue(state.defaultValue)from a group-level listener) restores every box; that is what we use as a workaround.🔦 Context
Found while migrating a design-system CheckboxGroup to react-aria. #8316 fixed this for 1.x in 2025; it fails again in 1.20.0.
🖥️ Steps to Reproduce
Version
react-aria-components 1.20.0, react-aria 3.51.0, react-stately 3.49.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