Components

Toggle Group

A set of toggles that act as one control.

Installation

npx shadcn@latest add @blank/toggle-group

Usage

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

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

variant="ghost" marks the pressed item in its text only, for a group that draws its own sliding indicator behind the items.

Examples

Outline, multiple

type="multiple" for independent options like text styles; single for one-of-many like alignment.

Spacing

At spacing={0} outline items fuse into one control. Any spacing above 0 separates them into individual pills, the filter-chip pattern.

Vertical