How it works
ColumnsFormStyle is the form style that arranges a form's controls into aligned columns, placing each row's label in one column and its editable value in another. It conforms to FormStyle, the protocol SwiftUI uses to lay out the contents of a Form, and it's the layout you get when you ask for the column-aligned presentation typical of settings windows on macOS. Reach for it when you want labels and fields to line up neatly side by side rather than stacking, so a dense group of inputs reads as a tidy table of name-and-value pairs.
Apply it with the .columns form style
You rarely name
ColumnsFormStyledirectly; instead you select it through the staticFormStyleaccessor.columns, which resolves to an instance of this type. In the example,.formStyle(.columns)is what swaps the form over to column-aligned layout.Attach it to a Form with formStyle(_:)
ColumnsFormStyleonly takes effect once it's handed to theformStyle(_:)view modifier, which installs aFormStyleinto the environment for the enclosingFormto read. HereForm { ... }.formStyle(.columns)binds the style to that specific form and itsSection.Let it align labels and values into columns
The style's job is to split each labeled control into a leading label column and a trailing value column, keeping them aligned across rows. The labels
"Name","Notifications", and"Volume"settle into one column while theTextField,Toggle, andSlidereditors line up in the next.Rely on its FormStyle conformance for layout decisions
Because
ColumnsFormStyleconforms toFormStyle, SwiftUI routes the form's body through the style'smakeBody(configuration:)to produce the columnar arrangement; you supply the content, the style supplies the structure. The wholeSection("Profile")and its controls are laid out by this conformance rather than by hand.
.formStyle(.columns) to .formStyle(.grouped) and watch the labels move from beside their fields to above them, revealing exactly what the column alignment of ColumnsFormStyle was doing.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 ColumnsFormStyleDemo: View {
@State private var name = "Ada"
@State private var notifications = true
@State private var volume = 0.6
var body: some View {
Form {
Section("Profile") {
TextField("Name", text: $name)
Toggle("Notifications", isOn: $notifications)
Slider(value: $volume) {
Text("Volume")
}
}
}
.formStyle(.columns)
.padding()
}
}