Toggle Group

A set of two-state buttons that can be toggled on or off, sharing variants with Toggle.

Install

npx shadcn@latest add https://atomx.acau.net/r/toggle-group.json

Toggle Group depends on the Toggle registry item for its shared variants; shadcn add installs both automatically.

Usage

Use type="single" for a one-of-N selection (like a radio group of icon buttons) or type="multiple" for an N-of-N selection. Each ToggleGroupItem needs a unique value.

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

Preview

Single selection

Multiple selection, outline variant

Props

ToggleGroup extends React.ComponentProps<typeof ToggleGroupPrimitive.Root> and VariantProps<typeof toggleVariants>.

Prop	Type	Notes
`type`	`"single" \| "multiple"`	Selection mode. Required.
`value`	`string \| string[]`	Controlled selected value(s).
`defaultValue`	`string \| string[]`	Initial value when uncontrolled.
`onValueChange`	`(value) => void`	Fired when selection changes.
`variant`	`"default" \| "outline"`	Applied to all items unless overridden.
`size`	`"default" \| "sm" \| "lg"`	Applied to all items unless overridden.
`disabled`	`boolean`	Disables every item.

ToggleGroupItem extends React.ComponentProps<typeof ToggleGroupPrimitive.Item> and VariantProps<typeof toggleVariants>.

Prop	Type	Notes
`value`	`string`	Required. Identifies the item within the group.
`disabled`	`boolean`	Disables just this item.
`variant`	`"default" \| "outline"`	Overrides the group's variant for this item.
`size`	`"default" \| "sm" \| "lg"`	Overrides the group's size for this item.