How it works
GroupBoxStyle is the protocol that defines the visual appearance of a group box — the bordered, optionally labeled container you create with GroupBox. By conforming a type to this protocol, you describe once how every group box should arrange its label and content, then apply that look consistently with the groupBoxStyle(_:) modifier. Reach for it when the platform-default container chrome doesn't match your design, or when you want a single reusable treatment that propagates to every GroupBox in a view hierarchy.
Apply a style with groupBoxStyle(_:)
The groupBoxStyle(_:) modifier is how you attach a GroupBoxStyle to a GroupBox (and to every group box nested within it). In the example,
.groupBoxStyle(.automatic)sets the style on theGroupBox("Storage")container, and because the value flows down through the environment, the same choice would apply to any descendant group boxes too.Start from the .automatic style
GroupBoxStyle provides
.automatic, the built-in style that resolves to the standard system container appearance for the current platform and context. Passing.automaticto.groupBoxStyle(.automatic)is the same as adding no style at all — it is the baseline you customize away from, useful as an explicit default or for resetting an inherited style.Receive a Configuration with label and content
A custom conformance implements makeBody(configuration:), which hands you a GroupBoxStyle.Configuration carrying two type-erased views:
configuration.labelandconfiguration.content. Your job is to lay these out and decorate them — for the demo's group box,labelwould be the "Storage" title andcontentwould be theText("128 GB of 256 GB used").Return the styled body from makeBody(configuration:)
Inside makeBody(configuration:) you compose
configuration.labelandconfiguration.contentinto whatever container you want — wrapping them in a VStack, adding a background, border, or padding to define the box's chrome. This is where you'd replace the system look entirely, deciding how the title sits relative to the "128 GB of 256 GB used" content.Reuse the style across the hierarchy
Because groupBoxStyle(_:) writes the style into the environment, applying it on a parent view styles all GroupBox instances beneath it, not just the one it's attached to. Defining your own GroupBoxStyle once and setting it high in the tree keeps every container — including this
GroupBox("Storage")— visually consistent without repeating the modifier.
.groupBoxStyle(.automatic) for .groupBoxStyle(YourStyle()) to see the Storage box take on your custom chrome.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 GroupBoxStyleDemo: View {
var body: some View {
GroupBox("Storage") {
Text("128 GB of 256 GB used")
.font(.subheadline)
}
.groupBoxStyle(.automatic)
.padding()
}
}