Toggle Group

The Toggle Group component provides a collection of buttons, each with two distinct states (on or off), allowing users to toggle their selection individually or as part of a group.

Docs API Reference

Setting Up the Toggle Group Component

npx shadcn@latest add toggle-group

Implementing the Toggle Group Component

  ToggleGroup, // The main container for a set of toggle buttons
  ToggleGroupItem, // Represents an individual toggle button within the group
} from "@/components/ui/toggle-group";

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

Practical Examples and Implementations

Basic Default Toggle Group Implementation

Applying the Outline Variant

Configuring for Single Selection

Adjusting to a Small Size

Adjusting to a Large Size

Implementing a Disabled Toggle Group State

Toggle Tooltip