← Back to Material 3 Compose
DockedSearchBar
Overview
Code Examples
Video
<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/docked-search-bar.png)
A DockedSearchBar displays search results in a bounded table below the input field. It is meant to be an alternative to SearchBar when expanding to full-screen size is undesirable on large screens such as tablets.
An example looks like:
Overloads
DockedSearchBar
@ExperimentalMaterial3Api
@Composable
fun DockedSearchBar(
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.dockedShape,
colors: SearchBarColors = SearchBarDefaults.colors(),
tonalElevation: Dp = SearchBarDefaults.Elevation,
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 |
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. |
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 |