How it works
A Section groups a set of related views into a visually and semantically distinct block, most often inside a List or a Form. By dividing a long collection of rows into labeled groups, it gives the reader structure — a separated band of content with its own header, and optionally a footer. Reach for Section whenever a single flat list would be hard to scan and the rows naturally fall into categories, such as the settings groups shown here.
Wrap related rows in a Section
Sectionis a container view: you pass a trailing closure whose contents become the grouped rows, and SwiftUI renders them as one cohesive block inside the enclosing container. Here twoSectionvalues sit directly inside theList, each holding a pair ofTextrows likeText("Profile")andText("Privacy").Give the group a header with the title initializer
The
init(_:content:)initializer takes a string title that becomes the section's header, letting you name the group without building a separate header view. The example passes"Account"and"Notifications"as those titles, so each block of rows is announced by a heading above it.Place sections inside a List or Form
Sectionderives its styling — inset grouping, separators, header treatment — from the container it lives in, so it is meant to be nested rather than used standalone. In this code both sections are children of theList, which is what turns the plain title strings into styled group headers and visually separatesAccountfromNotifications.Reach for the header/footer initializer when you need both
Beyond the title form,
Sectionoffers initializers that take explicitheaderandfooterview builders for richer captions or trailing explanatory text. The example uses only the string-title overload, but swapping to that form would let each group carry a footer beneath rows such asText("Email")andText("Push").
Text("Sounds") inside the Section("Notifications") closure and watch it join that group under the same header rather than starting a new band.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 SectionDemo: View {
var body: some View {
List {
Section("Account") {
Text("Profile")
Text("Privacy")
}
Section("Notifications") {
Text("Email")
Text("Push")
}
}
}
}