CheckboxGroup with indeterminate/select all checkbox

[snowystinger]

Discussed in #5215

^{Originally posted by richbachman October 6, 2023}
Hi team. First off, great work on the react-aria-components work. I'm really enjoying seeing it grow. I'm working on using the Checkbox and CheckboxGroup components, and am struggling with coming up with a way to have a select all option with an indeterminate state. Here's what I have so far, but something just isn't clicking. I didn't see an example on the doc site, but do you have one worked up somewhere else?

Thanks in advance.

const CheckboxGroupExample = () => {
  const [selected, setSelected] = React.useState(["subscribe", "test"]);

  const allSelected = selected.length === 3;
  const indeterminate =
    selected.length < 3 && selected.length > 0 && !allSelected;

  return (
    <>
      <CheckboxGroup
        errorText="This input does not meet the requirements."
        helpText="Help text that should hopefully just be one line but at most may stretch to two lines."
        label="Group label"
        value={selected}
        onChange={setSelected}
      >
        <Checkbox
          value="select-all"
          isIndeterminate={indeterminate}
          isSelected={allSelected}
        >
          Select all
        </Checkbox>
        <Checkbox
          value="subscribe"
        >
          Subscribe
        </Checkbox>
        <Checkbox
          value="test"
        >
          Test
        </Checkbox>
        <Checkbox
          value="another"
        >
          Another
        </Checkbox>
      </CheckboxGroup>
      <p>{selected}</p>
    </>
  );
};
```</div>

[devongovett]

Posted a workaround in the discussion: #5215 (comment). Is the proposal here to add an official select all checkbox slot or something? The hard part with that would be determining the values of all of the items in the group so that we can set the selected items appropriately. CheckboxGroup isn't implemented as a collection component like our others so it doesn't have access to all of the keys.

[snowystinger]

No proposal yet, wanted to discuss it. Unsetting the context seemed unintuitive. I also wanted to check if there were any aria concerns since a screen reader user would be presented with the select all first, but then would still need to visit the remainder individually in order to know what all has been selected or is available. Then they might need to navigate all the way back to actually select all. I'm not sure how that could be improved or if that's something we'd concern ourselves with.

[reidbarber]

We could potentially use a slot for this. This would be nice to have, but not blocking for RAC GA. We will have to bring up this use case with Spectrum designers to see if we want to support this in React Spectrum.

We could possibly get the state of all checkboxes in the group by querying the dom or using a registration pattern.

[dhruvikn]

+1 to this. It would be a great addition to the checkbox group API.