<ToggleGroup type="multiple" defaultValue={["bold"]}>
<ToggleGroupItem value="bold" aria-label="Toggle bold"><Bold /></ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic"><Italic /></ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline"><Underline /></ToggleGroupItem>
</ToggleGroup>

<ToggleGroup type="single" spacing={2} defaultValue="week">
<ToggleGroupItem value="day">Day</ToggleGroupItem>
<ToggleGroupItem value="week">Week</ToggleGroupItem>
<ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>

Toggle Group

tsx

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";export function ToggleGroupDemo() {return (  <ToggleGroup    type="single"    variant="outline"    defaultValue="left"    aria-label="Text alignment"  >    <ToggleGroupItem value="left" aria-label="Align left">      <AlignLeft />    </ToggleGroupItem>    <ToggleGroupItem value="center" aria-label="Align center">      <AlignCenter />    </ToggleGroupItem>    <ToggleGroupItem value="right" aria-label="Align right">      <AlignRight />    </ToggleGroupItem>  </ToggleGroup>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/toggle-group.json"

Usage

tsx

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

tsx

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

API

ToggleGroup

Built on Radix Toggle Group Root; accepts all its props.

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	none	Required. `single` allows one pressed item and slides an indicator to it. `multiple` allows any number.
`value`	`string` (single) \| `string[]` (multiple)	none	Controlled pressed value(s).
`defaultValue`	`string` (single) \| `string[]` (multiple)	none	Pressed value(s) on first render when uncontrolled.
`onValueChange`	`(value: string) => void` (single) \| `(value: string[]) => void` (multiple)	none	Called when the pressed value(s) change.
`variant`	`"default" \| "outline"`	none	Passed to every item. Items fall back to their own `variant`, then `"default"`.
`size`	`"default" \| "sm" \| "lg"`	none	Passed to every item. Items fall back to their own `size`, then `"default"`.
`spacing`	`number`	`0`	Gap between items, in Tailwind spacing units. `0` joins items into one segmented block.
`disabled`	`boolean`	`false`	Disables every item.
`orientation`	`"horizontal" \| "vertical"`	none	Arrow-key direction for roving focus. Both directions work when unset.
`rovingFocus`	`boolean`	`true`	Move focus between items with arrow keys.
`loop`	`boolean`	`true`	Wrap focus from the last item to the first.
`asChild`	`boolean`	`false`	Render the child element instead. Disables the sliding indicator.

ToggleGroupItem

Built on Radix Toggle Group Item; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Required. Unique value of the item within the group.
`variant`	`"default" \| "outline"`	`"default"`	Visual style. The group's `variant` wins when set.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Height and padding. The group's `size` wins when set.
`disabled`	`boolean`	`false`	Disables this item.
`asChild`	`boolean`	`false`	Render the child element instead, merging props via Radix Slot.

Props match shadcn/ui Toggle Group.