ToggleGroup

A set of two-state buttons that share a single value. Use type="single" for mutually-exclusive selection (a radio-like toolbar) or type="multiple" for independent toggles (formatting controls).

Single selection (alignment)

<ToggleGroup type="single" defaultValue="left">
  <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>

Multiple selection (text formatting)

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

Outline variant

<ToggleGroup type="single" variant="outline" defaultValue="center">
  <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>

Sizes

<>
  <ToggleGroup type="single" size="sm" defaultValue="left">…</ToggleGroup>
  <ToggleGroup type="single" size="md" defaultValue="left">…</ToggleGroup>
  <ToggleGroup type="single" size="lg" defaultValue="left">…</ToggleGroup>
</>

Disabled item

<ToggleGroup type="single" defaultValue="left">
  <ToggleGroupItem value="left" aria-label="Align left"><AlignLeft /></ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center" disabled><AlignCenter /></ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right"><AlignRight /></ToggleGroupItem>
</ToggleGroup>

Props

Prop	Type	Default
type	"single" \| "multiple"	—
variant	"default" \| "outline"	"default"
size	"sm" \| "md" \| "lg"	"md"
value / defaultValue	string \| string[]	—
onValueChange	(value: string \| string[]) => void	—
disabled	boolean	false
…rest	Radix ToggleGroup.Root props	—

Source

packages/react/src/components/toggle.tsx · Figma node 2819:31631