Toggle Group

Powered by

Radix UIShadcn UIAnimate UIMotion

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

Installation

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

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

Credits

• We use Radix 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.