Toggle Group
A group of toggles for selecting single or multiple options.
toggle-group-demo.tsx
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
export function ToggleGroupDemo() {
return (
<ToggleGroup>
<Toggle value="left">
<AlignLeftIcon />
</Toggle>
<Toggle value="center">
<AlignCenterIcon />
</Toggle>
<Toggle value="right">
<AlignRightIcon />
</Toggle>
</ToggleGroup>
)
}
Installation
npx shadcn@latest add https://9ui.dev/r/toggle-group
Usage
Imports
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
Anatomy
<ToggleGroup>
<Toggle />
</ToggleGroup>
Examples
Multiple
toggle-group-multiple.tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
export function ToggleGroupMultiple() {
return (
<ToggleGroup toggleMultiple>
<Toggle value="bold">
<BoldIcon />
</Toggle>
<Toggle value="italic">
<ItalicIcon />
</Toggle>
<Toggle value="underline">
<UnderlineIcon />
</Toggle>
</ToggleGroup>
)
}