TechnologiesSwiftUIControls and Style Configurations

ControlGroupStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOS✓ renders

The properties of a control group.

How it works

ControlGroupStyleConfiguration carries the information a custom ControlGroupStyle needs when it lays out a control group. When you conform a type to ControlGroupStyle, SwiftUI hands your makeBody(configuration:) method an instance of this configuration so you can read the group's existing controls and arrange them however you like. Reach for it whenever the built-in control group styles don't match your design and you want to define the container chrome — spacing, background, padding — while letting SwiftUI keep ownership of the controls themselves.

  1. Receive the configuration in makeBody(configuration:)

    A ControlGroupStyle defines exactly one requirement, makeBody(configuration:), and SwiftUI supplies a ControlGroupStyleConfiguration as its argument every time it needs to render a styled group. Your job is to return some View that incorporates the configuration's contents. In the example, CardControlGroupStyle.makeBody(configuration:) receives configuration and returns an HStack-based layout.

  2. Place the group's controls with configuration.content

    The configuration's content property is an opaque view representing the controls the call site declared inside the ControlGroup. You insert it into your own layout rather than building the buttons yourself, so the group's actual controls flow into the position you choose. Here configuration.content is dropped into an HStack(spacing: 12), letting the style decide arrangement while SwiftUI keeps the original controls.

  3. Wrap content in your own container chrome

    Because content is just another view, you can apply any modifiers around it to define the group's appearance. This is where a custom style earns its keep — surrounding the controls with the framing the design calls for. The example pads the stack with .padding(8) and draws a tinted .background(.blue.opacity(0.12), in: RoundedRectangle(cornerRadius: 10)) to give the group a card-like surface.

  4. Apply the style with controlGroupStyle(_:)

    A ControlGroupStyleConfiguration only comes into play once the style is attached to a control group. The controlGroupStyle(_:) modifier installs your conforming type, which is what prompts SwiftUI to call makeBody(configuration:) with the configuration. In the example, .controlGroupStyle(CardControlGroupStyle()) on the ControlGroup wires the custom style — and therefore the configuration — into effect.

Try it — Swap the HStack(spacing: 12) wrapping configuration.content for a VStack to see the same group's controls re-arranged vertically while their identity and behavior stay untouched.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

ControlGroupStyleConfiguration.swift
struct ControlGroupStyleConfigurationDemo: View {
    struct CardControlGroupStyle: ControlGroupStyle {
        func makeBody(configuration: ControlGroupStyleConfiguration) -> some View {
            HStack(spacing: 12) {
                configuration.content
            }
            .padding(8)
            .background(.blue.opacity(0.12), in: RoundedRectangle(cornerRadius: 10))
        }
    }

    var body: some View {
        ControlGroup {
            Button("Cut") {}
            Button("Copy") {}
            Button("Paste") {}
        }
        .controlGroupStyle(CardControlGroupStyle())
        .padding()
    }
}
Live preview
Cut Copy Paste
Cut Copy Paste
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →