adobe / adobe/react-spectrum

CheckboxGroup with indeterminate/select all checkbox

Open
#5,220 4 comments 0 reactions 0 assignees View on GitHub
Checkbox enhancement has workaround
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.