CheckboxGroup: `validationBehavior="aria"` is ignored by its checkboxes since 1.18

Open Beginner friendly
  • Is something wrong?
#10,856 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@mangeshraut712 is already working on this.

Since Oct 27, 2026.

  • #10860 by @mangeshraut712 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend, testing

Research direction

Start with Checkbox.tsx and useCheckboxGroupItem, following how validationBehavior is resolved and passed from the group to each checkbox; compare that flow with the change in #9877 and the working 1.17 behavior. Reproduce the report with the provided form and check whether form.checkValidity() remains false when the group uses validationBehavior="aria". Done means the group setting reaches its checkboxes and the form submits without setting the property on each checkbox.

Written by the indexing model from the issue text.

Description

Provide a general summary of the issue here

Setting validationBehavior="aria" on a CheckboxGroup doesn't reach the checkboxes inside it. A required group with nothing checked still blocks a native form submit, as if it were native. It works in 1.17.0 and broke in 1.18.0, with #9877 (f23d22f).

🤔 Expected Behavior?

With validationBehavior="aria" on the group, the group is marked invalid through ARIA and the form still submits.

😯 Current Behavior

The checkbox input gets required, and form.checkValidity() returns false, so the browser blocks the submit. Setting validationBehavior="aria" on each Checkbox as well makes it behave.

💁 Possible Solution

This came in with #9877. useCheckboxAria in Checkbox.tsx now resolves validationBehavior to props ?? form ?? 'native' and passes it to useCheckboxGroupItem too. useCheckboxGroupItem only falls back to the group's setting when the checkbox's is undefined, and with the 'native' default it never is. Before that change, the default was only passed to useCheckbox for standalone checkboxes. Leaving the 'native' default out for checkboxes inside a group should fix it.

🔦 Context

validationBehavior="aria" is how a form library like react-hook-form keeps the browser out of validation. With a CheckboxGroup that setting is lost, so the browser blocks the submit before the library's handler runs. The workaround is to also set validationBehavior="aria" on every Checkbox in the group.

🖥️ Steps to Reproduce
import { Checkbox, CheckboxGroup } from "react-aria-components";

export function App() {
  return (
    <form onSubmit={(e) => { e.preventDefault(); alert("submitted"); }}>
      <CheckboxGroup aria-label="Contact" isRequired validationBehavior="aria">
        <Checkbox value="email">Email</Checkbox>
      </CheckboxGroup>
      <button type="submit">Submit</button>
    </form>
  );
}

Click Submit with nothing checked. Expected: "submitted". Actual: Chrome shows "Please check this box if you want to proceed." and the form doesn't submit.

Same code on 1.17.0 submits. On 1.18.0 and later it doesn't (checked 1.18.0, 1.21.1 and 1.22.1).

Version

react-aria-components 1.22.1 (broken since 1.18.0; 1.17.0 works)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 15.6

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Dominant language
TypeScript
Stars
16k
Forks
1.6k
Avg merge
2d 19h
Merged PRs (30d)
41

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from adobe/react-spectrum

All issues in adobe/react-spectrum

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.