Primitive

ControlGroup

Grouped control primitive for segmented commands and compact tool sets.

Use ControlGroup for command adjacency. The child controls own behavior; the group owns spacing and attachment.
control
DOM renderImage render
ControlGroupDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Adjacent commands with controlled spacing.
Render state

Attached

Attached segmented commands.
Render state

Vertical

Vertical command group.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
orientation'horizontal' | 'vertical'-Control flow direction.
attachedboolean-Removes internal gaps for segmented controls.
density'compact' | 'comfortable' | 'editorial'comfortableFoundation-backed group rhythm.
labelstring-Accessible group label.
contentReactNode-Fallback render-input content.
childrenReactNode-Grouped controls.