Toggle Group

A set of two-state buttons that can be toggled on or off.

Single Selection

Only one item can be selected at a time.

Multiple Selection

Multiple items can be selected at once.

Variants

Default

Outline

Sizes

Usage

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

{/* Single selection */}
<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

{/* Multiple selection */}
<ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

{/* With variant and size */}
<ToggleGroup type="single" variant="outline" size="sm">
  ...
</ToggleGroup>

Toggle

Calendar