ToggleGroup

A set of two-state icon buttons that share one value — a compact toolbar where the pressed state shows the current setting. Reach for it when options are best shown as inline icons (alignment, text formatting); use RadioGroup for labelled exclusive choices in a form, Tabs to switch views, and a single Switch for one on/off setting. Pick type="single" for mutually-exclusive selection (radio-like) or type="multiple" for independent toggles. The default variant is ghost (borderless, for dense toolbars); use outline when the control needs a visible boundary on a busy surface. Sizes follow the shared control scale — sm (28px) for dense rows and inline editors, md (32px, default) for standalone toolbars, and lg (36px) for prominent or touch targets.

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