Toggle Group

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

ToggleGroupmultiple: boolean (default false) — value/defaultValue: string[] — variant · size · orientation · spacing

ToggleGroupItemvalue — inherits variant/size from the group

Playground

Variant— variant

Size— size

Disabled— disabled

size="xl" (default) · "lg" · "default" · "sm"

spacing={0} — joined segments (default) vs spacing={2} — separated

Selected weight: normal

5 semantic tokens consumed by this component.

--mutedMuted

bg-mutedtext-mutedborder-muted

--foregroundForeground

text-foreground

--inputInput

bg-inputborder-input

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive