CheckboxGroup with indeterminate/select all checkbox
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Discussed in https://github.com/adobe/react-spectrum/discussions/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 (
<>
Select all
Subscribe
Test
Another
{selected}
);
};
```
Contributor guide
Assessment
This issue has not been assessed yet.