Components

ToggleGroup

Toggle groups combine several related toggles into a single toolbar-like control. They work well for alignment, text formatting, and other compact grouped choices.

Basic Usage

Use a joined horizontal group for the most common compact toolbar pattern.

Variants

Variant changes help the same group pattern fit different control hierarchies.

Sizes

Size changes help the same group pattern fit both dense editors and more prominent control areas.

Orientation

Orientation lets the same interaction work as either a joined toolbar or a vertical control stack.

Spacing

Spacing can loosen the group when the items should read as related controls without touching edges.

Selection Modes

Use single selection for mutually exclusive choices, and multiple selection for independent formatting-style choices.

API reference

ToggleGroup wraps Base UI Toggle Group. Use the Base UI API reference for single and multiple selection, orientation, controlled state, and keyboard behavior.

Edit this page
Last updated: May 22, 2026, 6:53 PM