Toggle Group

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/toggle-group

Anatomy#

ToggleGroup
└── ToggleGroupItem

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#

States#

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.