Toggle Group

A high-quality, styled React toggle group component built with @base-ui/react for button groups.

The ToggleGroup component organizes multiple Toggle controls into a single managed group supporting single or multi-selection.

Usage

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

export function ExampleToggleGroup() {
  return (
    <ToggleGroup.Root defaultValue={["bold"]} multiple>
      <Toggle.Root value="bold">Bold</Toggle.Root>
      <Toggle.Root value="italic">Italic</Toggle.Root>
      <Toggle.Root value="underline">Underline</Toggle.Root>
    </ToggleGroup.Root>
  );
}

Preview

Custom Styling

Apply custom group spacing, borders, or shadow containers via className:

<ToggleGroup.Root className="bg-slate-900 border border-slate-800 p-1 rounded-xl gap-1">
  <Toggle.Root value="left" className="data-[pressed]:bg-indigo-600 data-[pressed]:text-white">Left</Toggle.Root>
</ToggleGroup.Root>

Styling & Class Names

Target internal toggle group CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.toggle-group`	Root container	Main toggle group flex row container.

Anatomy

import { Toggle } from "@base-ui/react/toggle";
import { ToggleGroup } from "@base-ui/react/toggle-group";

<ToggleGroup>
  <Toggle value="1" />
  <Toggle value="2" />
</ToggleGroup>;

API Reference

ToggleGroup.Root Props

Prop	Type	Default	Description
`value`	`string[]`	`undefined`	Controlled array of pressed toggle values.
`defaultValue`	`string[]`	`undefined`	Initial uncontrolled array of pressed toggle values.
`multiple`	`boolean`	`false`	When true, multiple items in the group can be pressed simultaneously.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the toggle button group.
`disabled`	`boolean`	`false`	Disables user interaction for all toggles in the group.