<div class='type'>Composable Component</div>


`ExpandedDockedSearchBarWithGap` represents a search bar that is currently expanding or in the
expanded state, showing search results. This component is displayed in a popup under (with a gap)
the collapsed search bar. It is recommended to use `ExpandedDockedSearchBarWithGap` on medium and
large screens such as tablets, and to instead use `ExpandedFullScreenSearchBar` on compact screen
such as phones.

<a id='references'></a>


<h2 id="expandeddockedsearchbarwithgap-state-inputfield-modifier-shape-dropdownshape-dropdowngapsize-dropdownscrimcolor-colors-tonalelevation-shadowelevation-properties-content">ExpandedDockedSearchBarWithGap</h2>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun ExpandedDockedSearchBarWithGap(
    state: SearchBarState,
    inputField: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = SearchBarDefaults.dockedShape,
    dropdownShape: Shape = SearchBarDefaults.dockedDropdownShape,
    dropdownGapSize: Dp = SearchBarDefaults.dockedDropdownGapSize,
    dropdownScrimColor: Color = SearchBarDefaults.dockedDropdownScrimColor,
    colors: SearchBarColors = SearchBarDefaults.colors(),
    tonalElevation: Dp = SearchBarDefaults.TonalElevation,
    shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
    properties: PopupProperties = PopupProperties(focusable = true, clippingEnabled = false),
    content: @Composable ColumnScope.() -> Unit,
) =
    ExpandedDockedSearchBarImpl(
        state = state,
        properties = properties,
        scrimColor = dropdownScrimColor,
    ) { focusRequester ->
        DockedSearchBarLayout(
            state = state,
            inputField = {
                Box(
                    modifier = Modifier.focusRequester(focusRequester),
                    propagateMinConstraints = true,
                ) {
                    inputField()
                }
            },
            modifier = modifier,
            searchBarShape = shape,
            dropdownShape = dropdownShape,
            dropdownGapSize = dropdownGapSize,
            colors = colors,
            tonalElevation = tonalElevation,
            shadowElevation = shadowElevation,
            content = content,
        )
    }
```


#### Parameters

| | |
| --- | --- |
| state | the state of the search bar. This state should also be passed to the `inputField` and the collapsed search bar. |
| inputField | the input field of this search bar that allows entering a query, typically a `SearchBarDefaults.InputField`. |
| modifier | the `Modifier` to be applied to this expanded search bar. |
| shape | the shape of the container wrapping both the `inputField` and `content`. |
| dropdownShape | the shape of the drop-down containing search results. |
| dropdownGapSize | the size of the gap between the drop-down containing search results and the search bar. |
| dropdownScrimColor | `Color` that will be used for the scrim behind the drop-down. Use `Color.Unspecified` to remove it. |
| 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. |
| properties | the platform-specific properties to configure the dialog's behavior. Any properties which limit the dialog's size (e.g. `DialogProperties.usePlatformDefaultWidth`) are ignored. |
| content | the content of this search bar to display search results below the `inputField`. |