Published Jul 2, 2023
Contribute to Docs

A Search Interface can be easily created using the .searchable() view modifier applied to a NavigationSplitView or NavigationStack, or to a view within them.


NavigationSplitView or NavigationStack
        text: binding variable of text to search for,
        placement: position (optional),
        prompt: prompt text (optional)

Here are a few of the placement property types:

  • .automatic places the search box automatically, this is the default value.
  • .sidebar places the search box in the sidebar.
  • .toolbar places the search box in the toolbar.

prompt is the prompt text to show in the search box. This defaults to display “Search” if the prompt parameter is not used.


The following example is a simple search interface. Two variables are declared:

  • An empty string named searchText to hold the text for searches.
  • A plants array containing plant names for the search to filter.

When the text in the search box is updated, searchText also updates, being bound by the .searchable()‘s text parameter $searchText. The code within the List checks whether to show a plant depending on the value of searchText.

import SwiftUI
struct SearchBoxListView: View {
@State private var searchText=""
let plants = ["Birch", "Daffodil", "Daisy", "Dandylion", "Fir", "Lily", "Oak", "Olive", "Rose", "Tulip"]
var body: some View {
NavigationStack {
List(plants, id: \.self) { plant in
if searchText.isEmpty || plant.contains(searchText) {
}.navigationTitle("Plants 🌷🌱")
text: $searchText,
prompt: "What plant are you looking for?"

This will initially display:

SwiftUI Search

If text is entered in the search box, the list will be filtered to contain only items that match the query text:

SwiftUI Search with query

All contributors

Looking to contribute?

Learn SwiftUI on Codecademy