How it works
SearchFieldPlacement is the value you hand to the searchable(text:placement:prompt:) modifier to tell SwiftUI where the search field should live within an interface. Rather than positioning a search field yourself, you describe a semantic location and let each platform render it in the conventional spot — inside a navigation bar, a toolbar, or a sidebar. Reach for it when the default placement isn't what you want, or when a particular surface (such as a navigation stack on iOS) supports a more specific arrangement that you want to opt into.
Pass a placement to the searchable modifier
SearchFieldPlacement is consumed by the placement parameter of the searchable modifier; it never stands alone. In the example,
.searchable(text: $query, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search fruits")binds the field to$queryand uses the placement argument to decide where that field appears.Choose a placement with a static member
You construct a SearchFieldPlacement through its type-property and factory members rather than a public initializer, so leading-dot syntax resolves to the type. The example selects
.navigationBarDrawer(displayMode:); other members like.automatic,.toolbar, and.sidebargive SwiftUI different hints, and.automaticlets the framework pick the platform-appropriate spot.Refine navigation-bar placement with a display mode
Some placements take an associated configuration.
.navigationBarDrawer(displayMode:)accepts a SearchFieldPlacement.NavigationBarDrawerDisplayMode value that controls whether the field stays visible or hides until the user scrolls. Passing.alwayshere keeps the search field pinned beneath the.navigationTitle("Fruits")rather than letting it tuck away.Place the modifier where the search context lives
A SearchFieldPlacement only has meaning relative to the container that hosts it, so apply searchable inside that container. Here the modifier sits on the
Listwithin aNavigationStack, which is exactly the structure.navigationBarDrawertargets — the placement plugs the field into the surrounding navigation bar.
displayMode: .always to displayMode: .automatic in the searchable call and watch the search field hide itself until you scroll, instead of staying anchored under the title.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 SearchFieldPlacementDemo: View {
@State private var query = ""
private let fruits = ["Apple", "Banana", "Cherry", "Date"]
var body: some View {
NavigationStack {
List(fruits.filter { query.isEmpty || $0.contains(query) }, id: \.self) { fruit in
Text(fruit)
}
.navigationTitle("Fruits")
.searchable(text: $query, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search fruits")
}
}
}