Toggle Group

A set of related toggles that can enforce single or multiple selection.

#Installation

npx @dinachi/cli@latest add toggle-group

tsx

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

A toggle group with multiple selection

Toggle group with single selection mode

Toggle groups in different sizes

Prop	Type	Default	Description
type	'single' \| 'multiple'	'single'	Selection mode for the toggle group.
value	string \| string[]	—	Controlled selected value(s).
defaultValue	string \| string[]	—	Initial value(s) for uncontrolled usage.
onValueChange	(value: string \| string[]) => void	—	Callback fired when selection changes.
ToggleGroupItem.variant	'default' \| 'outline'	'outline'	Visual style variant for each item.
ToggleGroupItem.size	'default' \| 'sm' \| 'lg'	'sm'	Size variant for each item.