Toggle Group

Overview

A group of ToggleButton-styled options with managed selection — single (radio-like) or multiple (independent toggles). Items reuse the toggle-button variants verbatim, so a group is visually indistinguishable from standalone toggle buttons. By default the group renders as the MD3 connected group: a 2px gap with small facing corners and the family shape on the outer ends — the same corner treatment as SplitButton.

Examples

Single selection

Single selection is the default — the options are mutually exclusive (value is still an array, with at most one entry). Add labels alongside icons for self-explanatory options.

Variants

All five toggle-button styles apply to groups.

Separate pills

Set connected={false} for free-standing items with a normal gap.

Installation

npx shadcn@latest add toggle-group

API Reference

ToggleGroup

ToggleGroupItem

Accessibility

• Items are toggle buttons with aria-pressed state in a role="group"; single selection (the default) keeps at most one pressed, multiple allows several — handled by the Base UI primitive.
• Keyboard: Tab enters the group, Arrow keys move between items (roving focus), Space/Enter toggles.
• Give icon-only items an aria-label.
• Per the toggle-button spec, pass an outline icon via icon and its filled form via selectedIcon so state is not conveyed by color alone.