Toggle Group

A set of two-state buttons that can be toggled on or off.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/toggle-group.json

Usage

Group related toggles for exclusive or multi selection. Items share variant and size from the parent.

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react";

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

export function Example() {
  return (
    <ToggleGroup multiple defaultValue={["bold"]} variant="outline">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <IconBold />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <IconItalic />
      </ToggleGroupItem>
      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <IconUnderline />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

Base UI uses defaultValue / value as string arrays, multiple for multi-select, and orientation for layout. Set spacing={0} for a joined control.