Compose Multiplatform Material3/androidx.compose.material3/SearchBar

SearchBar

@Composable

fun SearchBar(inputField: @Composable () -> Unit, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Material Design search.

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.

A search bar expands into a search "view" and can be used to display dynamic suggestions or search results.

A SearchBar tries to occupy the entirety of its allowed size in the expanded state. 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:

Parameters

inputField

the input field of this search bar that allows entering a query, typically a SearchBarDefaults.InputField.

expanded

whether this search bar is expanded and showing search results.

onExpandedChange

the callback to be invoked when this search bar's expanded state is changed.

modifier

the Modifier to be applied to this search bar.

shape

the shape of this search bar when it is not expanded. When expanded, 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.

shadowElevation

the elevation for the shadow below this search bar

windowInsets

the window insets that this search bar will respect

content

the content of this search bar to display search results below the inputField.

Samples

androidx.compose.material3.samples.SearchBarSample

@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.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Deprecated

Use overload which takes inputField as a parameter

Replace with

SearchBar(
    inputField = {
        SearchBarDefaults.InputField(
            query = query,
            onQueryChange = onQueryChange,
            onSearch = onSearch,
            expanded = active,
            onExpandedChange = onActiveChange,
            enabled = enabled,
            placeholder = placeholder,
            leadingIcon = leadingIcon,
            trailingIcon = trailingIcon,
            colors = colors.inputFieldColors,
            interactionSource = interactionSource,
        )
    },
    expanded = active,
    onExpandedChange = onActiveChange,
    modifier = modifier,
    shape = shape,
    colors = colors,
    tonalElevation = tonalElevation,
    shadowElevation = shadowElevation,
    windowInsets = windowInsets,
    content = content,
)