Toggle Group

A set of two-state buttons that can be toggled on or off, built on top of Base UI.

Installation

$ npx shadcn@latest add "/r/toggle-group.json"

Usage

Sizes

Available in three sizes to accommodate different layouts.

Props

ToggleGroup

Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg"`	`"md"`	The size of the toggle group items.
type	`"single" \| "multiple"`	`"single"`	Whether the group allows single or multiple selection.
value	`string \| string[]`	-	The controlled value of the toggle group.
defaultValue	`string \| string[]`	-	The default value of the toggle group.
onValueChange	`(value: any) => void`	-	Event handler called when the value changes.
disabled	`boolean`	`false`	Whether the toggle group is disabled.
className	`string`	-	Additional CSS classes to apply to the toggle group.

ToggleGroupItem

Prop	Type	Default	Description
value	`string`	-	The value of the toggle group item.
disabled	`boolean`	`false`	Whether the toggle group item is disabled.
className	`string`	-	Additional CSS classes to apply to the item.