# AppBarWithSearch

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearch.composable#AppBarWithSearch(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.material3.AppBarWithSearchColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.SearchBarScrollBehavior)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarState, inputField: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, navigationIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, actions: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearchColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, scrollBehavior: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarScrollBehavior? )` [Material Design search](https://m3.material.io/components/search/overview) | Cmn |

## Functions

### AppBarWithSearch

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SearchBar.kt+function:AppBarWithSearch)

```
@ExperimentalMaterial3Api
@Composable
fun AppBarWithSearch(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: (@Composable () -> Unit)? = null,
    actions: (@Composable RowScope.() -> Unit)? = null,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: AppBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    contentPadding: PaddingValues = SearchBarDefaults.AppBarContentPadding,
    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
    scrollBehavior: SearchBarScrollBehavior? = null
): Unit
```

[Material Design search](https://m3.material.io/components/search/overview)

A search bar represents a 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.

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

An `https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearch.composable#AppBarWithSearch(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.material3.AppBarWithSearchColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.SearchBarScrollBehavior)` is a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` with additional handling for top app bar behavior, such as window insets and scrolling. Using an `https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearch.composable#AppBarWithSearch(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.material3.AppBarWithSearchColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.SearchBarScrollBehavior)` as the top bar of a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)` ensures that the search bar remains at the top of the screen. Like with `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearch.composable#AppBarWithSearch(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.material3.AppBarWithSearchColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.SearchBarScrollBehavior)` should be used in conjunction with an `https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedFullScreenSearchBar.composable#ExpandedFullScreenSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedDockedSearchBar.composable#ExpandedDockedSearchBar(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.PopupProperties,kotlin.Function1)` to display search results when expanded.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.AppBarWithSearch
import androidx.compose.material3.ExpandedFullScreenContainedSearchBar
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBarState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberContainedSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp

val textFieldState = rememberTextFieldState()
val searchBarState = rememberContainedSearchBarState()
val scope = rememberCoroutineScope()
val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
val appBarWithSearchColors =
    SearchBarDefaults.appBarWithSearchColors(
        searchBarColors = SearchBarDefaults.containedColors(state = searchBarState)
    )
val inputField =
    @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            colors = appBarWithSearchColors.searchBarColors.inputFieldColors,
            onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
            placeholder = {
                Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
            },
            leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
            trailingIcon = { SampleTrailingIcon() },
        )
    }

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        AppBarWithSearch(
            scrollBehavior = scrollBehavior,
            state = searchBarState,
            colors = appBarWithSearchColors,
            inputField = inputField,
            navigationIcon = { SampleNavigationIcon(searchBarState, isAnimated = true) },
            actions = { SampleActions(searchBarState, isAnimated = true) },
        )
        ExpandedFullScreenContainedSearchBar(
            state = searchBarState,
            inputField = inputField,
            colors = appBarWithSearchColors.searchBarColors,
        ) {
            SampleSearchResults(
                onResultClick = { result ->
                    textFieldState.setTextAndPlaceCursorAtEnd(result)
                    scope.launch { searchBarState.animateToCollapsed() }
                }
            )
        }
    },
) { padding ->
    LazyColumn(contentPadding = padding, verticalArrangement = Arrangement.spacedBy(8.dp)) {
        val list = List(100) { "Text $it" }
        items(count = list.size) {
            Text(
                text = list[it],
                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            )
        }
    }
}
```

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.AppBarWithSearch
import androidx.compose.material3.ExpandedDockedSearchBarWithGap
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarWithGapState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp

val textFieldState = rememberTextFieldState()
val searchBarState = rememberSearchBarWithGapState()
val scope = rememberCoroutineScope()
val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
val appBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()
val inputField =
    @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            colors = appBarWithSearchColors.searchBarColors.inputFieldColors,
            onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
            placeholder = {
                Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
            },
            leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
            trailingIcon = { SampleTrailingIcon() },
        )
    }

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        AppBarWithSearch(
            scrollBehavior = scrollBehavior,
            state = searchBarState,
            colors = appBarWithSearchColors,
            inputField = inputField,
            navigationIcon = { SampleNavigationIcon(searchBarState) },
            actions = { SampleActions(searchBarState) },
        )
        ExpandedDockedSearchBarWithGap(state = searchBarState, inputField = inputField) {
            SampleSearchResults(
                onResultClick = { result ->
                    textFieldState.setTextAndPlaceCursorAtEnd(result)
                    scope.launch { searchBarState.animateToCollapsed() }
                }
            )
        }
    },
) { padding ->
    LazyColumn(contentPadding = padding, verticalArrangement = Arrangement.spacedBy(8.dp)) {
        val list = List(100) { "Text $it" }
        items(count = list.size) {
            Text(
                text = list[it],
                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            )
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarState` | the state of the search bar. This state should also be passed to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#AppBarWithSearch(androidx.compose.material3.SearchBarState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.graphics.Shape,androidx.compose.material3.AppBarWithSearchColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.SearchBarScrollBehavior)` and the expanded search bar. |
| `inputField: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the input field of this search bar that allows entering a query, typically a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#InputField(androidx.compose.foundation.text.input.TextFieldState,androidx.compose.material3.SearchBarState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.foundation.text.input.InputTransformation,androidx.compose.foundation.text.input.OutputTransformation,androidx.compose.foundation.ScrollState,androidx.compose.ui.graphics.Shape,androidx.compose.material3.TextFieldColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.input.TextFieldLineLimits)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this search bar when collapsed. |
| `navigationIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the icon displayed at the start of the app bar before the search bar. This should typically be an `https://developer.android.com/reference/kotlin/androidx/compose/material3/IconButton.composable#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0)` or `https://developer.android.com/reference/kotlin/androidx/compose/material3/IconToggleButton.composable#IconToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0)`. |
| `actions: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the icons displayed at the end of the app bar after the search bar. This should typically be `https://developer.android.com/reference/kotlin/androidx/compose/material3/IconButton.composable#IconButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.IconButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,kotlin.Function0)`s. The default layout here is a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, so icons inside will be placed horizontally. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SearchBarDefaults.inputFieldShape` | the shape of this search bar when collapsed. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/AppBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors` that will be used to resolve the colors used for this search bar. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#colors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.TextFieldColors)`. |
| `tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SearchBarDefaults.TonalElevation` | when `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors#containerColor()` is `https://developer.android.com/reference/kotlin/androidx/compose/material3/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: `https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.BorderStroke,kotlin.Function0)`. |
| `shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = SearchBarDefaults.ShadowElevation` | the elevation for the shadow below this search bar. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = SearchBarDefaults.AppBarContentPadding` | the spacing values to apply internally between the container and the content. |
| `windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets = SearchBarDefaults.windowInsets` | the window insets that the search bar will respect when collapsed. |
| `scrollBehavior: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarScrollBehavior? = null` | a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarScrollBehavior` which works in conjunction with a scrolled content to change the search bar appearance as the content scrolls. If null, the search bar will not automatically react to scrolling. |