Toggle Group

Installation

bunx --bun shadcn@latest add @sui/toggle-group

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import { ToggleGroup, ToggleGroupItem } from "@workspace/ui/components/toggle-group"

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Composition

Use the following composition to build a ToggleGroup:

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Outline

Use variant="outline" for an outline style.

Size

Use the size prop to change the size of the toggle group.

Spacing

Use spacing to add spacing between toggle group items.

Vertical

Use orientation="vertical" for vertical toggle groups.

Disabled

Custom

A custom toggle group example.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

See the Base UI Toggle Group documentation.

Changelog

2026-05-17 Default Spacing

Changed the default spacing from 0 to 2 so toggle groups render with space between items by default. Use spacing={0} for connected items.