ControlGroup struct

How it works

A ControlGroup displays semantically related controls as a single, visually unified unit. SwiftUI renders the grouped controls with a shared background and platform-appropriate spacing, so a cluster of buttons reads as one coordinated control rather than a loose row of separate ones. Reach for it when you have a handful of actions that belong together — zoom in and out, a set of toolbar commands, segmented operations — and you want the system to lay them out and style them consistently.

1. Group controls in the content closure

   The first trailing closure holds the controls that belong to the group; SwiftUI gathers them and presents them as one unit. Here the closure contains two Button views, an "Increase" button and a "Decrease" button, which ControlGroup arranges together with shared chrome instead of as independent buttons.

2. Describe each action with Label

   Inside the grouped buttons, Label pairs a title with an SF Symbol so each control carries both text and an icon. The example uses Label("Increase", systemImage: "plus") and Label("Decrease", systemImage: "minus"); ControlGroup reads these labels to size and render the controls uniformly, and platforms may collapse them to icon-only when space is tight.

3. Supply a group label with the label closure

   The second closure, marked label:, names the group as a whole. Providing Text("Zoom") gives the cluster an accessible title and lets contexts such as toolbars or menus show a heading or representative label for the collapsed group, distinct from the individual control labels.

4. Apply modifiers to the whole group

   Because ControlGroup is itself a View, modifiers attach to the unit and affect it as a whole rather than the inner controls. The .padding() here insets the entire group, so the shared layout and spacing ControlGroup provides stays intact while you position the cluster within body.