Data Display
Forms
Navigation
Toggle Group
Provides a shared state to a series of toggle buttons.
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import { Toggle, ToggleGroup } from "@/components/ui/toggle-group";
export default function Particle() {
return (
<ToggleGroup defaultValue={["bold"]}>
<Toggle aria-label="Toggle bold" value="bold">
<BoldIcon />
</Toggle>
<Toggle aria-label="Toggle italic" value="italic">
<ItalicIcon />
</Toggle>
<Toggle aria-label="Toggle underline" value="underline">
<UnderlineIcon />
</Toggle>
</ToggleGroup>
);
}
Installation
pnpm dlx cnippet@latest add toggle-group
Usage
import { Toggle, ToggleGroup } from "@/components/ui/toggle-group"<ToggleGroup>
<Toggle>Bold</Toggle>
<Toggle>Italic</Toggle>
<Toggle>Underline</Toggle>
</ToggleGroup>On This Page