Toggle Group

Toggle groups combine several related toggles into a single toolbar-like control. They work well for alignment, text formatting, and other compact grouped choices.

Basic Usage

Use a joined horizontal group for the most common compact toolbar pattern.

Variants

Variant changes help the same group pattern fit different control hierarchies.

Sizes

Size changes help the same group pattern fit both dense editors and more prominent control areas.

Orientation

Orientation lets the same interaction work as either a joined toolbar or a vertical control stack.

Spacing

Spacing can loosen the group when the items should read as related controls without touching edges.

Selection Modes

Use single selection for mutually exclusive choices, and multiple selection for independent formatting-style choices.

API

Slots

Name	Description
(default)	pk-toggle or button[data-value] items

Props

Name	Description
joined	Type boolean Default true
multiple	Type boolean Default false
orientation	Type PkToggleGroupOrientation Default horizontal
size	Type PkToggleSize Default default
spacing	Gap between items — 0 joins adjacent toggles (React spacing={0}). Type number Default 0
variant	Type PkToggleVariant Default default

CSS Parts

Name	Description	CSS selector
base	Group container	::part(base)