Toggle Group

shadcn/ui

2 types

Set of toggle buttons — single or multiple selection. For segmented controls and formatting toolbars.

@/components/ui/toggle-group

Types

type	Preview	Behavior
single		Only one item active at a time — selecting another deactivates the current
multiple		Any number of items can be active simultaneously

Variants

default

outline

disabled

Sizes

default

In context — density picker + formatting

Table density

Active: "default"— type="single", controlled with value + onValueChange

Active: ["bold"]— type="multiple"

Props — ToggleGroup

Prop	Type	Description
type	"single" \| "multiple"	Single: one active at a time. Multiple: any number active.
value	string \| string[]	Controlled active item(s)
defaultValue	string \| string[]	Initially active item(s), uncontrolled
onValueChange	function	(value) => void
variant	"default" \| "outline"	Passed to all items; outline adds border
size	"sm" \| "default" \| "lg"	Passed to all items
disabled	boolean	Disables all items

ToggleGroupItem inherits variant/size from ToggleGroup. Active item: bg-accent text-accent-foreground

On this page