Toggle Group

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

import { ToggleGroup, ToggleGroupItem } from "@/registry/optics/toggle-group";<ToggleGroup type="multiple">	<ToggleGroupItem value="bold" aria-label="Toggle bold">		<Bold className="h-4 w-4" />	</ToggleGroupItem>	<ToggleGroupItem value="italic" aria-label="Toggle italic">		<Italic className="h-4 w-4" />	</ToggleGroupItem>	<ToggleGroupItem value="underline" aria-label="Toggle underline">		<Underline className="h-4 w-4" />	</ToggleGroupItem></ToggleGroup>

import { ToggleGroup, ToggleGroupItem } from "@/registry/optics/toggle-group";<ToggleGroup type="multiple">	<ToggleGroupItem value="bold" aria-label="Toggle bold">		<Bold className="h-4 w-4" />	</ToggleGroupItem>	<ToggleGroupItem value="italic" aria-label="Toggle italic">		<Italic className="h-4 w-4" />	</ToggleGroupItem>	<ToggleGroupItem value="underline" aria-label="Toggle underline">		<Underline className="h-4 w-4" />	</ToggleGroupItem></ToggleGroup>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/toggle-group.json

Props

Name

Type

className

string

type

"single" | "multiple"

value

string | string[]

defaultValue

string | string[]

onValueChange

(value: string | string[]) => void

disabled

boolean

variant

"default" | "outline"

size

"default" | "sm" | "lg"

spacing

number (default: 0)