# SearchBar

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable 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)( 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, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` [Material Design search](https://m3.material.io/components/search/overview) | Cmn |
| `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 [SearchBar](https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1))( inputField: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, expanded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onExpandedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Use SearchBar with SearchBarState, and ExpandedFullScreenSearchBar or ExpandedDockedSearchBar to display results. | Cmn |
| `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 [SearchBar](https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.String,kotlin.Function1,kotlin.Function1,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1))( query: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, onQueryChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, onSearch: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, active: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onActiveChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, placeholder: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, trailingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> 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/SearchBarColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** Use overload which takes inputField as a parameter | Cmn |

## Functions

### SearchBar

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:SearchBar)

```
@Composable
fun SearchBar(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.inputFieldShape,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation
): 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)

The `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)` component represents a search bar in the collapsed state. It 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.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExpandedFullScreenSearchBar
import androidx.compose.material3.Icon
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBarState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics

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

SearchBar(state = searchBarState, inputField = inputField)
ExpandedFullScreenSearchBar(state = searchBarState, inputField = inputField) {
    SampleSearchResults(
        onResultClick = { result ->
            textFieldState.setTextAndPlaceCursorAtEnd(result)
            scope.launch { searchBarState.animateToCollapsed() }
        }
    )
}
```

| 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#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)` 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. |
| `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/SearchBarColors = SearchBarDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors` that will be used to resolve the colors used for this search bar in different states. 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. |

### SearchBar

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:SearchBar)

```
@ExperimentalMaterial3Api
@Composable
fun [SearchBar](https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1))(
    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
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use SearchBar with SearchBarState, and ExpandedFullScreenSearchBar or ExpandedDockedSearchBar to display results.

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

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.

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

A `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1)` must not pass any `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/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, `https://developer.android.com/reference/kotlin/androidx/compose/material3/DockedSearchBar.composable#DockedSearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Function1)` can be used instead.

| Parameters |
|---|---|
| `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)`. |
| `expanded: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this search bar is expanded and showing search results. |
| `onExpandedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the callback to be invoked when this search bar's expanded state is changed. |
| `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. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SearchBarDefaults.inputFieldShape` | the shape of this search bar when it is not `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1)`. When `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1)`, the shape will always be `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarDefaults#fullScreenShape()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors = SearchBarDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBarColors` that will be used to resolve the colors used for this search bar in different states. 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 |
| `windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets = SearchBarDefaults.windowInsets` | the window insets that this search bar will respect |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this search bar to display search results below the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,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.foundation.layout.WindowInsets,kotlin.Function1)`. |

### SearchBar

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:SearchBar)

```
@ExperimentalMaterial3Api
@Composable
fun [SearchBar](https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable#SearchBar(kotlin.String,kotlin.Function1,kotlin.Function1,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1))(
    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
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use overload which takes inputField as a parameter, use this instead:
>
> ```kotlin
> SearchBar(
>     inputField = {
>         SearchBarDefaults.InputField(
>             textFieldState = textFieldState,
>             searchBarState = searchBarState,
>             onSearch = onSearch,
>             modifier = modifier,
>             enabled = enabled,
>             readOnly = readOnly,
>             textStyle = textStyle,
>             placeholder = placeholder,
>             leadingIcon = leadingIcon,
>             trailingIcon = trailingIcon,
>             prefix = prefix,
>             suffix = suffix,
>             inputTransformation = inputTransformation,
>             outputTransformation = outputTransformation,
>             scrollState = scrollState,
>             shape = shape,
>             colors = colors,
>             interactionSource = interactionSource,
>             keyboardOptions = keyboardOptions,
>             lineLimits = lineLimits,
>         )
>     },
>     expanded = active,
>     onExpandedChange = onActiveChange,
>     modifier = modifier,
>     shape = shape,
>     colors = colors,
>     tonalElevation = tonalElevation,
>     shadowElevation = shadowElevation,
>     windowInsets = windowInsets,
>     content = content,
> )
> ```