ComponentClient component

Toggle Group

A coordinated set of single or multiple selection toggles.

Installation

Preview

Usage

tsx

import { Bold, Italic } from "lucide-react"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup type="multiple" variant="outline">
  <ToggleGroupItem value="bold"><Bold /></ToggleGroupItem>
  <ToggleGroupItem value="italic"><Italic /></ToggleGroupItem>
</ToggleGroup>

API reference

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`—`	Controls the selection model.
`variant`	`"default" \| "outline"`	`"default"`	Shared treatment for every item.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.