SwiftUI.cc
Snippets
LayoutLayout ModifiersAdvanced

SwiftUI Alignment Guides and Coordinate Space

Reach for alignment guides and coordinate spaces when default stack alignment is not expressive enough.

5 min readUpdated 2026-06
Custom label alignment
import SwiftUI

private extension HorizontalAlignment {
    enum FormLabel: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.leading]
        }
    }

    static let formLabel = HorizontalAlignment(FormLabel.self)
}

struct AlignedFormRow: View {
    var body: some View {
        VStack(alignment: .formLabel) {
            Label("Email", systemImage: "envelope")
                .alignmentGuide(.formLabel) { $0[.leading] }
            TextField("name@example.com", text: .constant(""))
        }
    }
}
Use this when

Stack alignment needs a custom baseline or edge that is not provided by default.

A child view's position must be understood relative to a named container.

You are building scroll effects, sticky labels, or measured overlays.

Avoid this when

Simple leading, trailing, center, top, or bottom alignment is sufficient.

The view can be expressed with Grid or a custom Layout more clearly.

The measurement is only needed for a one-off hard-coded offset.

Implementation notes

alignmentGuide changes how a view reports its alignment, which is different from visually moving it with offset.
Named coordinate spaces make geometry reads more robust than relying only on global positions.
When many screens need similar measurement behavior, consider a custom Layout or reusable helper.

Checklist

Name custom alignments after the layout meaning, not a pixel position.

Avoid geometry reads inside every row of a large list unless needed.

Test when text wraps to multiple lines.

Related reference