How it works
GroupedFormStyle is a FormStyle that arranges a form's contents into discrete, visually separated groups set against an inset background — the familiar grouped appearance of iOS Settings-style screens. Use it when you want each Section to read as its own distinct card rather than a single continuous list, giving related controls clear boundaries and breathing room. Reach for it whenever a form benefits from strong visual chunking of its sections, particularly on platforms where the grouped look is the expected idiom. You apply it through the formStyle(_:) modifier rather than instantiating the type directly.
Build the container with Form
GroupedFormStyle only takes effect inside a
Form, which is the view that hosts labeled controls and adopts a form style. Here theFormwraps the entire profile screen, providing the surface that the grouped style will lay out and decorate.Partition content with Section
The grouped style operates on each
Section, rendering it as a separate group with its own inset background and header. The example's two sections,Section("Profile")andSection("About"), become two visually distinct cards, and their string arguments supply the group headers that sit above each one.Apply the style with formStyle(.grouped)
The
formStyle(_:)modifier is how you select a FormStyle for a form's hierarchy, and.groupedis the static shorthand that resolves to GroupedFormStyle. Attaching.formStyle(.grouped)to theFormswitches its layout from the automatic style to the grouped presentation across all of its sections at once.Let controls inherit the style
Standard form controls —
TextField("Name", text: $name)andToggle("Notifications", isOn: $notify)— need no per-control configuration; they automatically pick up the grouped layout, including the inset alignment and row treatment, simply by living inside aFormthat uses GroupedFormStyle.
.formStyle(.grouped) to .formStyle(.columns) and watch the two sections lose their separated card backgrounds and collapse into a single aligned column.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 GroupedFormStyleDemo: View {
@State private var notify = true
@State private var name = "Ada"
var body: some View {
Form {
Section("Profile") {
TextField("Name", text: $name)
Toggle("Notifications", isOn: $notify)
}
Section("About") {
Text("Version 1.0")
}
}
.formStyle(.grouped)
}
}