Toggle Group

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

When to use

Toggle Group operates as a segmented control, allowing users to filter or adjust the display of content within the current view. Unlike tabs that navigate between distinct content areas, segmented controls modify how existing content is presented. Content is typically shared across different segments, with the control determining what's visible or how it's formatted.

Use Toggle Group when:

• Filtering or adjusting a single content view
• Toggling between different presentations of the same data
• Content is shared across segments (list vs. grid, day vs. week vs. month)
• Making formatting choices (bold, italic, underline)
• The view context remains the same, just filtered or adjusted

Don't use Toggle Group when:

• Navigating between completely different content areas (use Tabs instead)
• Each option shows unique, non-overlapping content
• The interaction triggers a full content change rather than a filter/adjustment

Usage

<ToggleGroup>
  <ToggleGroupItem>A</ToggleGroupItem>
  <ToggleGroupItem>B</ToggleGroupItem>
  <ToggleGroupItem>C</ToggleGroupItem>
</ToggleGroup>

Examples

Multiple

Outline Variant

The outline variant provides a bordered container around the toggle group, ideal for segmented controls that filter or adjust content.

Attached Mode

Vertical Orientation

Combined with Tabs

This example demonstrates the key difference between tabs (navigation) and toggle groups (filtering). Tabs navigate between different content areas, while toggle groups filter or adjust content within each tab's view.

Props

Animate UI Props

ToggleGroup

ToggleGroupItem

Keyboard interactions

Accessibility

• The container carries role="group" (or role="radiogroup" for type="single"), and each item is an aria-pressed button.
• Focus is roving — only one item is tabbable at a time. Arrow keys move both focus and (for type="single") selection.
• Provide an accessible group label — either aria-label on ToggleGroup or a visible heading with aria-labelledby — otherwise the purpose of the group isn't announced.
• Use type="single" for mutually-exclusive filters (like/dislike, sort direction) and type="multiple" for independent switches (text formatting, feature flags).

Credits

• We use Base UI for the toggle group component.
• We take our inspiration from Shadcn UI for the toggle group style.
• We use Animate UI from imskyleen for all the animations.