[toggle] Support 3-state toggles using `aria-pressed="mixed"`
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
Follow up to https://github.com/mui/base-ui/issues/11#issuecomment-2441834890
The ARIA [specs](https://w3c.github.io/aria/#aria-pressed) allows `aria-pressed="mixed"` in addition to true/false
> A value of mixed means that the values of more than one item controlled by the button do not all share the same value.
This would imply that the `mixed` button should only be used in a use-case where it is controlling several other controls, and not intended to be used by itself. In other words, it should not toggle a state that isn't already associated with another control.
The main difference between using a tri-state toggle vs an indeterminate checkbox is that checkboxes should be for form submission (where you have to "actively submit" something"), whereas toggles should be used to affect instant changes in an UI (e.g. immediately turn on/off the lights).
#### Example use-cases
- "Collapse/Expand All" buttons that can bulk-control a whole Accordion https://adrianroselli.com/2024/03/check-all-expand-all-controls.html#ARIA
- An light switch that can toggle multiple independent light switches at once https://github.com/w3c/aria/issues/1406#issuecomment-1222605491
- A text selection in an editor contains bold and non-bold text, a "Bold text" toggle button could have `aria-pressed="mixed"` in this situation (this may be out of scope here)
- https://github.com/mui/material-ui/issues/40737
PS: the button [APG](https://www.w3.org/WAI/ARIA/apg/patterns/button/) makes no mention of this
**Search keywords**:
Contributor guide
Assessment
This issue has not been assessed yet.