How it works
Use LabeledContent to pair a descriptive label with an associated value or view, presenting them as a single coherent row. It expresses the common "label on one side, content on the other" relationship declaratively, so SwiftUI can apply the correct alignment, spacing, and styling for the surrounding context rather than leaving you to position the two pieces by hand. Reach for it whenever you're displaying a read-only attribute, a setting's current value, or a detail field in a settings screen, inspector, or summary list.
Pair a title with a value using LabeledContent
The most direct initializer takes a localized title string and a value, rendering the title as the label and the value as trailing content.
LabeledContent("Username", value: "appleseed")andLabeledContent("Storage", value: "128 GB")each produce a labeled row from two simple strings, with no manual layout required.Supply custom content with a trailing closure
When the value is more than plain text, use the initializer that takes a title and a
@ViewBuildercontent closure. The label stays a string while the content becomes any view you build. InLabeledContent("Status") { Text("Active").foregroundStyle(.green) }, the closure supplies a styledTextas the trailing content, letting you color, format, or compose it however you like.Let the container drive label and value alignment
LabeledContentdoesn't fix its own geometry; it adapts to its container, which is why it reads as a tidy two-column row inside aForm. Placing the rows inFormgives each one the platform-standard leading label, trailing value, and inter-row spacing automatically, soUsername,Status, andStorageline up consistently.Restyle rows with labeledContentStyle()
Because
LabeledContentconforms to the styling system, you can apply the.labeledContentStyle()modifier to switch presentations or attach your ownLabeledContentStyleto a row or an enclosing view. This lets you change how the label and content are arranged across an entire section without rewriting eachLabeledContentcall.
LabeledContent("Status", value:)-style row by replacing the Text("Active").foregroundStyle(.green) content with a multi-line view, and watch the value column grow while the Status label stays vertically aligned to it.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 LabeledContentDemo: View {
var body: some View {
Form {
LabeledContent("Username", value: "appleseed")
LabeledContent("Status") {
Text("Active")
.foregroundStyle(.green)
}
LabeledContent("Storage", value: "128 GB")
}
.padding()
}
}