Breaking forms into sections
Updated for Xcode 14.2
Updated in iOS 15
SwiftUI’s forms often work best when broken into sections, just like regular lists of content. How you break them up is down to you, but usually it works best when you group things according to their purpose – if it were an order page you might put items in one group, customization in another, and delivery in a third.
Helpfully, form sections are identical to list sections, which means you can re-use the same code in both places. So, you can add a header and/or footer to your sections, or use neither and just get some on-screen spacing between your sections.
As an example, this creates a form with two sections – the first with a segmented control and toggle, and the second with a save button:
struct ContentView: View {
@State private var enableLogging = false
@State private var selectedColor = "Red"
@State private var colors = ["Red", "Green", "Blue"]
var body: some View {
Form {
Section(footer: Text("Note: Enabling logging may slow down the app")) {
Picker("Select a color", selection: $selectedColor) {
ForEach(colors, id: \.self) {
Text($0)
}
}
.pickerStyle(.segmented)
Toggle("Enable Logging", isOn: $enableLogging)
}
Section {
Button("Save changes") {
// activate theme!
}
}
}
}
}
Download this as an Xcode project
Important: In Xcode 12 you need to use SegmentedPickerStyle() rather than .segmented.
SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Similar solutions…
- How to add sections to a list
- Bindings and forms
- Working with forms
- Enabling and disabling elements in forms
- Pickers in forms
