Skip to Content

Toggle Group

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

One
Two
Three

Multiple select

One
Two
Three

Icons

Variants

One
Two
Three

Component props

ToggleGroup

NameTypeDescription
labelstringLabel text displayed above the group
selectionModeSelectionMode"single" | "multiple" (default: "single")
valuestring[]Controlled selected values
defaultValuestring[]Default selected values
variantToggleGroupVariant"primary"
onChange(value: string[]) => voidCalled when selection changes

ToggleGroupItem

NameTypeDescription
idstringUnique item identifier (required)
isDisabledbooleanDisables the item