Toggle Group

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/toggle-group.json

Usage

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

<ToggleGroup>
  <ToggleGroupItem value="1">Item 1</ToggleGroupItem>
  <ToggleGroupItem value="2">Item 2</ToggleGroupItem>
</ToggleGroup>

Orientation

Use orientation to change the orientation of the toggle group.

Horizontal

Vertical

Variant

Use variant to change the visual style of the toggle buttons.

Ghost

Outline

State

Disabled

Disable the entire group with the disabled prop.

With disabled toggle

Disable individual toggles by setting disabled on a specific item.

Examples

With spacing

Use spacing to add space between buttons.

Single selection

Use multiple={false} to allow only one toggle to be selected at a time.

Custom toggle group

A custom toggle group example with tooltips and custom styling for font weight selection.

API Reference

ToggleGroup

Root component. Provides shared variant and size to child toggles via context.

ToggleGroupItem

Single toggle in the group. Uses <Toggle /> internally.

For a complete list of props, see the Ark UI documentation.