CheckboxGroup with indeterminate/select all checkbox

[richbachman]

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>
    </>
  );
};

[snowystinger]

I don't think you can accomplish this right now due to context control of selected states. We could consider adding it, we'll need to check if there are any accessibility concerns. We'd also need to determine what the API would look like, if we handle it at the group level or on individual checkboxes like you've tried here. For now you'll need to separate the select all from the rest of the group.

[devongovett]

It's a little hacky I guess, but if you need the select all checkbox to be within the checkbox group in the DOM, you can escape the CheckboxGroup managed state setting the CheckboxGroupStateContext to null.

<CheckboxGroupStateContext.Provider value={null}>
  <MyCheckbox
    isIndeterminate={indeterminate}
    isSelected={allSelected}
    onChange={(isSelected) => setSelected(isSelected ? ["subscribe", "test", "another"] : [])}>
    Select all
  </MyCheckbox>
</CheckboxGroupStateContext.Provider>

Working example