How it works
NavigationLinkPickerStyle is the picker style that presents a picker's choices on a separate screen, reached by tapping a navigation link row. Instead of showing the options inline or in a wheel, the picker collapses to a single row that displays the current selection and a disclosure indicator; selecting it pushes a list of options onto the navigation stack. Reach for this style inside settings-like forms where each picker should read as a compact, tappable row rather than expand in place — particularly when a picker has more options than fit comfortably in a wheel or menu. Because it relies on a push transition, it is designed to live within a NavigationStack.
Apply the style with .pickerStyle(.navigationLink)
You select this style by passing it to the pickerStyle(_:) modifier on a Picker. The shorthand .navigationLink resolves to a NavigationLinkPickerStyle instance, so applying
.pickerStyle(.navigationLink)to thePicker("Flavor", selection: $flavor)turns that picker into a single navigation-link row.Bind the current selection
The style renders whatever value the picker's selection binding currently holds as the text of the collapsed row. Here the
selection: $flavorbinding drives that row label, and tapping it pushes the options screen where choosing a new value writes back through the same binding to updateflavor.Supply the option rows and their tags
The pushed screen lists the picker's content views, matching each one against the selection by its tag. The
ForEach(flavors, id: \.self)builds aText(flavor)row per choice, and.tag(flavor)gives each row the value the binding compares against so the destination list can mark the active selection.Host the picker inside a navigation stack
Because NavigationLinkPickerStyle works by pushing a destination, the picker must sit within a navigation container that can perform that push. Wrapping the
Formin aNavigationStackprovides the stack the style pushes onto, and.navigationTitle("Ice Cream")titles the root screen the picker row lives on.
.pickerStyle(.navigationLink) with .pickerStyle(.inline) and watch the single tappable row expand into a full list of flavors shown directly in the form.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 NavigationLinkPickerStyleDemo: View {
@State private var flavor = "Vanilla"
let flavors = ["Vanilla", "Chocolate", "Strawberry", "Mint"]
var body: some View {
NavigationStack {
Form {
Picker("Flavor", selection: $flavor) {
ForEach(flavors, id: \.self) { flavor in
Text(flavor).tag(flavor)
}
}
.pickerStyle(.navigationLink)
}
.navigationTitle("Ice Cream")
}
}
}