State-based SearchBar in Compose material3 1.5.0

searchSearch messagesS

• historyDesign review notes
• historyShape morph prototype
• historySpring motion tokens

Tap the bar to expand the results

In 1.5.0-beta02 the old SearchBar(query, onQueryChange, onSearch, active, onActiveChange, …) and DockedSearchBar are deprecated. The new SearchBar(state, inputField) is stable. It holds text in a TextFieldState, and you show results in a separate expanded composable.

@Composable
fun AppSearch(suggestions: (String) -> List<String>, onSearch: (String) -> Unit) {
    // State-based search bar. The old SearchBar(query, onQueryChange, active, …) is deprecated.
    val searchBarState = rememberSearchBarState()
    val textFieldState = rememberTextFieldState()
    val scope = rememberCoroutineScope()
    val inputField = @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            onSearch = { query ->
                onSearch(query)
                scope.launch { searchBarState.animateToCollapsed() }
            },
            placeholder = { Text("Search") },
        )
    }

    SearchBar(state = searchBarState, inputField = inputField)
    ExpandedFullScreenSearchBar(state = searchBarState, inputField = inputField) {
        LazyColumn {
            items(suggestions(textFieldState.text.toString())) { suggestion ->
                ListItem(
                    onClick = {
                        textFieldState.setTextAndPlaceCursorAtEnd(suggestion)
                        onSearch(suggestion)
                        scope.launch { searchBarState.animateToCollapsed() }
                    },
                ) { Text(suggestion) }
            }
        }
    }
}

For a search field inside a top app bar, use AppBarWithSearch (renamed from TopSearchBar, still @ExperimentalMaterial3Api).

Related: API status: deprecations · flexible top app bar

Want your agent to get this right every time? Install the skill. If this page helped,star the repo on GitHub.