Toggle Group

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

Installation

bash
npx shadcn@latest add toggle-group

Import

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

Single Selection

<ToggleGroup type="single" defaultValue="center">  <ToggleGroupItem value="left" aria-label="Left">    <AlignLeft className="h-4 w-4" />  </ToggleGroupItem>  <ToggleGroupItem value="center" aria-label="Center">    <AlignCenter className="h-4 w-4" />  </ToggleGroupItem>  <ToggleGroupItem value="right" aria-label="Right">    <AlignRight className="h-4 w-4" />  </ToggleGroupItem></ToggleGroup>

Multiple Selection

<ToggleGroup type="multiple">  <ToggleGroupItem value="bold">B</ToggleGroupItem>  <ToggleGroupItem value="italic">I</ToggleGroupItem>  <ToggleGroupItem value="underline">U</ToggleGroupItem></ToggleGroup>

Props

ToggleGroup

PROPTYPEDEFAULTDESCRIPTION
type"single" | "multiple"—Selection mode (required)
valuestring | string[]—Controlled value
defaultValuestring | string[]—Initial value (uncontrolled)
onValueChange(value) => void—Called when selection changes
disabledbooleanfalseDisables all items
variant"default" | "outline""default"Visual style variant
size"sm" | "default" | "lg""default"Toggle size

ToggleGroupItem

PROPTYPEDEFAULTDESCRIPTION
valuestring—Item value (required)
disabledbooleanfalseDisables this item