Toggle Group

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

shadcn/ui docs →

Preview

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/toggle-group.json

Dependencies: @radix-ui/react-toggle-group

Usage

example.tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { Bold, Italic, Underline } from "lucide-react"

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="size-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline className="size-4" />
  </ToggleGroupItem>
</ToggleGroup>
0