Jetpack Compose SearchBar in Material 3 Compose

<a href="https://m3.material.io/components/search/overview" class="external" target="_blank">Material Design search</a>.

A search bar represents a floating search field that allows users to enter a keyword or phrase and get relevant information. It can be used as a way to navigate through an app via search queries.

An active search bar expands into a search "view" and can be used to display dynamic suggestions.

!Search bar image(https://developer.android.com/images/reference/androidx/compose/material3/search-bar.png)

A SearchBar expands to occupy the entirety of its allowed size when active. For full-screen behavior as specified by Material guidelines, parent layouts of the SearchBar must not pass any Constraints that limit its size, and the host activity should set WindowCompat.setDecorFitsSystemWindows(window, false).

If this expansion behavior is undesirable, for example on large tablet screens, DockedSearchBar can be used instead.

An example looks like:

Overloads

SearchBar

@ExperimentalMaterial3Api
@Composable
fun SearchBar(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    active: Boolean,
    onActiveChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.Elevation,
    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit,
)

Parameters

Name	Description
`query`	the query text to be shown in the search bar's input field
`onQueryChange`	the callback to be invoked when the input service updates the query. An updated text comes as a parameter of the callback.
`onSearch`	the callback to be invoked when the input service triggers the ImeAction.Search action. The current query comes as a parameter of the callback.
`active`	whether this search bar is active
`onActiveChange`	the callback to be invoked when this search bar's active state is changed
`modifier`	the Modifier to be applied to this search bar
`enabled`	controls the enabled state of this search bar. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
`placeholder`	the placeholder to be displayed when the search bar's query is empty.
`leadingIcon`	the leading icon to be displayed at the beginning of the search bar container
`trailingIcon`	the trailing icon to be displayed at the end of the search bar container
`shape`	the shape of this search bar when it is not active. When active, the shape will always be SearchBarDefaults.fullScreenShape.
`colors`	SearchBarColors that will be used to resolve the colors used for this search bar in different states. See SearchBarDefaults.colors.
`tonalElevation`	when SearchBarColors.containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
`windowInsets`	the window insets that the search bar will respect
`interactionSource`	the MutableInteractionSource representing the stream of Interactions for this search bar. You can create and pass in your own `remember`ed instance to observe Interactions and customize the appearance / behavior of this search bar in different states.
`content`	the content of this search bar that will be displayed below the input fiel