Toggle Group

Installation#

pnpm add @ag/ui

Usage#

import { ToggleGroup, ToggleGroupItem } from "@ag/ui"

<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

Examples#

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 Radix Toggle Group documentation.