How it works
LabeledContentStyleConfiguration carries the two pieces of a labeled-content view — its label and its content — into a custom LabeledContentStyle so you can decide how they're arranged. When you conform a type to LabeledContentStyle, SwiftUI hands its makeBody(configuration:) method a value of this type as the configuration, leaving you free to lay out and decorate those elements however you like. Reach for it whenever the built-in labeled-content presentation isn't enough and you want a reusable style you can apply across many LabeledContent views.
Receive the configuration in makeBody(configuration:)
A LabeledContentStyle implements the required makeBody(configuration:) method, and SwiftUI passes in a LabeledContentStyleConfiguration as the configuration argument. In CardLabeledContentStyle, makeBody(configuration:) reads from configuration to assemble the final view, returning some View that SwiftUI substitutes for each styled LabeledContent.
Place the label property
The configuration's label property is a type-erased view representing the labeled content's label. Here configuration.label is dropped into an HStack and given .font(.headline), so every label rendered through this style picks up the same emphasis without the call site needing to know about it.
Place the content property
The content property holds the value or trailing-closure view that accompanies the label. The style positions configuration.content after a Spacer and dims it with .foregroundStyle(.secondary), defining the side-by-side relationship between the two halves of the LabeledContent.
Wrap both elements in your own layout
Because LabeledContentStyleConfiguration only supplies the parts, you own the surrounding container and decoration. The example nests label and content in an HStack, then applies .padding(12) and a .background using a RoundedRectangle, turning each labeled row into a card.
Apply the style with labeledContentStyle(_:)
A LabeledContentStyle takes effect once it's attached to the view hierarchy with the labeledContentStyle(_:) modifier. Calling .labeledContentStyle(CardLabeledContentStyle()) on the VStack routes both the "Wi-Fi" and "Battery" LabeledContent views through the configuration-driven makeBody, so a single style governs them all.
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 LabeledContentStyleConfigurationDemo: View {
struct CardLabeledContentStyle: LabeledContentStyle {
func makeBody(configuration: Configuration) -> some View {
HStack {
configuration.label
.font(.headline)
Spacer()
configuration.content
.foregroundStyle(.secondary)
}
.padding(12)
.background(.blue.opacity(0.12), in: RoundedRectangle(cornerRadius: 10))
}
}
var body: some View {
VStack(spacing: 12) {
LabeledContent("Wi-Fi") {
Text("Home Network")
}
LabeledContent("Battery", value: "84%")
}
.labeledContentStyle(CardLabeledContentStyle())
.padding()
}
}