Toggle Group

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/toggle-group

UsageCopy Anchor Link

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

<ToggleGroup aria-label="Text style" defaultValue={["bold"]}>
  <ToggleGroupItem aria-label="Bold" value="bold">
    <BoldIcon />
  </ToggleGroupItem>
  <ToggleGroupItem aria-label="Italic" value="italic">
    <ItalicIcon />
  </ToggleGroupItem>
</ToggleGroup>;

Every ToggleGroupItem needs a value. The group's value is always an array, even when only one item can be pressed. Use the arrow keys to move between items.

Multiple selectionCopy Anchor Link

By default, pressing an item releases the others. Pass multiple to allow several at once.

OutlineCopy Anchor Link

variant="outline" joins the items into one bordered control. Add ToggleGroupSeparator between items for a divider.

VerticalCopy Anchor Link

Set orientation="vertical" on the group, and orientation="horizontal" on each separator.

API referenceCopy Anchor Link

Also accepts every Base UI Toggle Group prop, like value, defaultValue, onValueChange, multiple, and disabled. ToggleGroupItem accepts every Toggle prop.

ToggleGroupCopy Anchor Link

ToggleGroupSeparatorCopy Anchor Link