Toggle Group

Single- or multi-select group of toggle buttons sharing variant/size context.

Default
Disabled
Multiple
Sizes

sm

default

lg

Variants

Default

Outline

Vertical

Installation

npx shadcn@latest add @byronwade/toggle-group

Props

PropTypeDefaultDescription
valuestring[]Controlled array of pressed item values.
defaultValuestring[]Uncontrolled initial pressed values.
onValueChange(value: string[]) => voidFires when the pressed items change.
multiplebooleanfalseAllow more than one item pressed at once.
variant"default" | "outline""default"Visual style shared by all items.
size"default" | "sm" | "lg""default"Item size shared by all items.
orientation"horizontal" | "vertical""horizontal"Layout axis of the group.
disabledbooleanfalseDisable the entire group.