How it works
GroupBoxStyleConfiguration holds the resolved parts of a group box — its title label and its grouped content — and hands them to a custom style for layout. SwiftUI creates one and passes it to your GroupBoxStyle, so your style never reaches back to the original GroupBox; it composes the views the configuration supplies. Reach for it whenever you define a reusable group box appearance and need to arrange the label and content yourself rather than accepting the system default.
Receive the configuration in makeBody(configuration:)
A GroupBoxStyle gets the configuration as the single argument to its makeBody(configuration:) method, where the parameter is typed against the style's Configuration associated type — an alias for GroupBoxStyleConfiguration. In CardStyle, makeBody receives configuration and returns the styled view that SwiftUI substitutes for the group box.
Place the title with configuration.label
The label property is a type-erased view built from the title you gave the GroupBox — here the "Account" string. Position it wherever the design calls for it; CardStyle puts configuration.label at the top of a VStack and applies .font(.headline) to it, treating it as styleable view content rather than a raw string.
Lay out the grouped views with configuration.content
The content property is the view-builder body of the group box collapsed into one view — in this case the two Text rows ("Signed in as Jane" and "Plan: Pro"). CardStyle drops configuration.content beneath the label so the style controls spacing and grouping without knowing what specific views are inside.
Compose decoration around the configuration's views
Because the configuration only supplies label and content, the surrounding container and chrome are entirely yours to define. CardStyle wraps both in a VStack(alignment: .leading, spacing: 8) and adds .padding(), .background(Color.blue.opacity(0.1)), and .cornerRadius(12) to produce the card look.
Apply the style with groupBoxStyle()
A style built around the configuration takes effect when you attach it with the .groupBoxStyle() modifier, which routes the affected GroupBox through your makeBody. The GroupBox("Account") here adopts the card treatment via .groupBoxStyle(CardStyle()).
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.
struct GroupBoxStyleConfigurationDemo: View {
var body: some View {
GroupBox("Account") {
Text("Signed in as Jane")
Text("Plan: Pro")
}
.groupBoxStyle(CardStyle())
.padding()
}
}
struct CardStyle: GroupBoxStyle {
func makeBody(configuration: Configuration) -> some View {
VStack(alignment: .leading, spacing: 8) {
configuration.label
.font(.headline)
configuration.content
}
.padding()
.background(Color.blue.opacity(0.1))
.cornerRadius(12)
}
}