ToggleGroup

Role and semantics

ToggleGroup renders an element with role="group" through Base UI ToggleGroup; label is required at type level and set as aria-label. Each item is a <button> with aria-pressed.

Keyboard

Key	Behaviour
Tab	Enters the group and focuses the last focused or the first item. The next Tab leaves the group.
Left and right arrow (horizontal)	Move focus to the previous or next item. In right-to-left text the directions are mirrored.
Up and down arrow (vertical)	Move focus to the previous or next item.
Enter, Space	Switch the pressed state of the focused item.

Focus

Only one item of the group is in the tab order (roving tab stop). The focused item shows the focus-visible ring and comes in front of its neighbour.

Screen reader output

Example	Output
Entering the group	“Text alignment, group”, then “Align left, toggle button, pressed”
Next item with an arrow key	“Centre, toggle button, not pressed”

Contrast

The pressed item is told apart by fill and border; color-border-selected has at least 3:1 contrast on the background.

WCAG 2.2

Criterion	How ToggleGroup meets it	What the product team does
1.3.1 Info and relationships	role="group" and a required aria-label.	Write the label as the name of the setting.
2.1.1 Keyboard	Arrow keys, Enter and Space.	Do not wrap items in other elements.
4.1.2 Name, role, value	Each item carries aria-pressed.	Give icon items a label.
1.4.1 Use of colour	The pressed state shows through fill and border.	Do not remove the border.