Toggle Group

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

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/toggle-group.json

Usage

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

<ToggleGroup aria-label="Text formatting" defaultValue={["bold"]}>
  <ToggleGroupItem aria-label="Toggle bold" value="bold">
    <BoldIcon />
  </ToggleGroupItem>
  <ToggleGroupItem aria-label="Toggle italic" value="italic">
    <ItalicIcon />
  </ToggleGroupItem>
  <ToggleGroupItem aria-label="Toggle underline" value="underline">
    <UnderlineIcon />
  </ToggleGroupItem>
</ToggleGroup>

Multiple

Pass the multiple prop to allow more than one item to be pressed at once.