Searchable Modifier in SwiftUI

The searchable modifier in SwiftUI makes it easy to add search functionality to your views. It provides a native search experience with automatic keyboard handling, search suggestions, and integration with the navigation bar.

What is the searchable Modifier?

The searchable modifier, introduced in iOS 15, adds a search field to your view. It integrates seamlessly with NavigationStack and List views, providing a familiar search experience that users expect.

Basic Usage

Here's a simple example of adding search to a list:

import SwiftUI

struct SearchableListView: View {
    @State private var searchText = ""
    let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

    var filteredItems: [String] {
        if searchText.isEmpty {
            return items
        }
        return items.filter { $0.localizedCaseInsensitiveContains(searchText) }
    }

    var body: some View {
        NavigationStack {
            List(filteredItems, id: \.self) { item in
                Text(item)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText, prompt: "Search fruits")
        }
    }
}

Search Suggestions

You can provide search suggestions that appear as the user types:

struct SearchWithSuggestionsView: View {
    @State private var searchText = ""
    let allItems = ["Swift", "SwiftUI", "UIKit", "Combine", "CoreData"]

    var searchResults: [String] {
        if searchText.isEmpty {
            return allItems
        }
        return allItems.filter { $0.localizedCaseInsensitiveContains(searchText) }
    }

    var body: some View {
        NavigationStack {
            List(searchResults, id: \.self) { item in
                Text(item)
            }
            .navigationTitle("Technologies")
            .searchable(text: $searchText) {
                ForEach(popularSearches, id: \.self) { suggestion in
                    Text(suggestion)
                        .searchCompletion(suggestion)
                }
            }
        }
    }

    var popularSearches: [String] {
        ["Swift", "SwiftUI", "Combine"]
    }
}

Search Scopes

You can add search scopes to filter results by category:

struct SearchWithScopesView: View {
    @State private var searchText = ""
    @State private var searchScope: SearchScope = .all

    enum SearchScope: String, CaseIterable {
        case all = "All"
        case recent = "Recent"
        case favorites = "Favorites"
    }

    var body: some View {
        NavigationStack {
            List {
                // Your content here
            }
            .navigationTitle("Search")
            .searchable(text: $searchText)
            .searchScopes($searchScope) {
                ForEach(SearchScope.allCases, id: \.self) { scope in
                    Text(scope.rawValue)
                }
            }
        }
    }
}

Accessibility

The searchable modifier provides good accessibility support out of the box:

• VoiceOver announces the search field

• Keyboard navigation works automatically

• Search is dismissible with the cancel button

Wrap up

The .searchable modifier is the quickest way to add search to a SwiftUI app. Scopes and suggestions are opt-in, so start simple and add them only if your content needs them.

Resources:

• searchable(text:placement:prompt:)

• searchCompletion(_:)

Read more

• ContentUnavailableView • 5 minutes reading time.
• If case let • 3 minutes reading time.
• Environment: OpenURL • 2 minutes reading time.

Share