Chapter 45: Toggle Group

Core Idea

A one-part wrapper coordinating multiple Toggle children — multiple switches between "always exactly one pressed" (like a segmented control) and "any subset pressed" (like independent formatting buttons grouped visually).

Key Concepts

• Anatomy: <ToggleGroup> wraps plain Toggle children directly — no other sub-parts.
• multiple: false (default behavior implied) → mutually exclusive, single active toggle, like Radio's exclusivity but with toggle-button styling; true → independent multi-select, like a CheckboxGroup rendered as buttons.
• Value: value/defaultValue/onValueChange on the group, array-based when multiple.
• Roving tabindex: loopFocus + orientation, same arrow-key navigation convention as Menu/Radio Group/Tabs.

Reference Tables

Part	Notable props	Notable data attributes
ToggleGroup	value/defaultValue/onValueChange, multiple, loopFocus, orientation, disabled	data-orientation, data-multiple, data-disabled

Key Takeaways

1. Set multiple explicitly to match the intended semantics — a text-alignment picker (left/center/right, exactly one active) needs multiple={false}; a text-formatting toolbar (bold/italic/underline, any combination) needs multiple={true}.
2. Individual Toggles still need a unique value within the group — that's what the group's value/onValueChange array tracks.

Connects To

• ch044 (Toggle): the individual button this component groups.
• ch046 (Toolbar): often composed together — a Toolbar frequently contains one or more ToggleGroups among its controls.