mui / mui/base-ui

[toggle] Support 3-state toggles using `aria-pressed="mixed"`

Open
#952 2 comments 1 reaction 0 assignees View on GitHub
component: toggle type: new feature
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

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.