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>
	)
}