Common
```kotlin
@ExperimentalMaterial3Api
object SearchBarDefaults
```
Defaults used in [SearchBar](/jetpack-compose/androidx.compose.material3/material3/components/SearchBar) and [DockedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/DockedSearchBar).
## Properties
Common
```kotlin
val TonalElevation: Dp
```
Default tonal elevation for a search bar.
Common
```kotlin
val ShadowElevation: Dp
```
Default shadow elevation for a search bar.
Common
> **Deprecated** Renamed to TonalElevation. Not to be confused with ShadowElevation.
```kotlin
@Deprecated(
message = "Renamed to . Not to be confused with ShadowElevation.",
replaceWith = ReplaceWith(""),
level = DeprecationLevel.WARNING,
)
val Elevation: Dp
```
Common
```kotlin
val InputFieldHeight: Dp
```
Default height for a search bar's input field, or a search bar in the unexpanded state.
Common
```kotlin
val inputFieldShape: Shape
```
Default shape for a search bar's input field, or a search bar in the unexpanded state.
Common
```kotlin
val fullScreenShape: Shape
```
Default shape for a [SearchBar](/jetpack-compose/androidx.compose.material3/material3/components/SearchBar) in the expanded state.
Common
```kotlin
val collapsedContainedSearchBarColor: Color
```
Default container color for an [ExpandedFullScreenContainedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/ExpandedFullScreenContainedSearchBar) in the collapsed state.
Common
```kotlin
val fullScreenContainedSearchBarColor: Color
```
Default container color for an [ExpandedFullScreenContainedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/ExpandedFullScreenContainedSearchBar) in the expanded state.
Common
```kotlin
val dockedShape: Shape
```
Default shape for a [DockedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/DockedSearchBar).
Common
```kotlin
val dockedDropdownShape: Shape
```
Default shape for a drop-down containing search results attached to a [DockedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/DockedSearchBar).
Common
```kotlin
val dockedDropdownGapSize: Dp = // TODO: replace with token.
```
Default gap size for a drop-down attached to a [DockedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/DockedSearchBar).
Common
```kotlin
val dockedDropdownScrimColor: Color
```
Default scrim color for a drop-down attached to a [DockedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/DockedSearchBar).
Common
```kotlin
val AppBarContentPadding = PaddingValues(all = 0.dp)
```
Default padding used for [AppBarWithSearch](/jetpack-compose/androidx.compose.material3/material3/components/AppBarWithSearch) content
Common
```kotlin
val windowInsets: WindowInsets
```
Default window insets for an [AppBarWithSearch](/jetpack-compose/androidx.compose.material3/material3/components/AppBarWithSearch).
Common
```kotlin
val fullScreenWindowInsets: WindowInsets
```
Default window insets used and consumed by [ExpandedFullScreenSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/ExpandedFullScreenSearchBar).
## Functions
enterAlwaysSearchBarScrollBehavior
```kotlin
@ExperimentalMaterial3Api
@Composable
fun enterAlwaysSearchBarScrollBehavior(
initialOffset: Float = 0f,
initialOffsetLimit: Float = -Float.MAX_VALUE,
initialContentOffset: Float = 0f,
canScroll: () -> Boolean = { true },
snapAnimationSpec: AnimationSpec = MotionSchemeKeyTokens.DefaultEffects.value(),
flingAnimationSpec: DecayAnimationSpec = rememberSplineBasedDecay(),
reverseLayout: Boolean = false,
): SearchBarScrollBehavior
```
Returns a [SearchBarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior). A search bar that is set up with this behavior will
immediately scroll upward off-screen when the content is pulled up, and will immediately
appear when the content is pulled down.
The returned [SearchBarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior) is remembered across compositions.
#### Parameters
| | |
| --- | --- |
| initialOffset | the initial value for [SearchBarScrollBehavior.scrollOffset](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior). Should be between `initialOffsetLimit` and 0. |
| initialOffsetLimit | the initial value for [SearchBarScrollBehavior.scrollOffsetLimit](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior), which represents the pixel limit that a search bar is allowed to scroll off-screen when the content is scrolled. |
| initialContentOffset | the initial value for [SearchBarScrollBehavior.contentOffset](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior). |
| canScroll | a callback used to determine whether scroll events are to be handled by this [SearchBarScrollBehavior](/jetpack-compose/androidx.compose.material3/material3/interfaces/SearchBarScrollBehavior). |
| snapAnimationSpec | an [AnimationSpec](/jetpack-compose/androidx.compose.animation/animation-core/interfaces/AnimationSpec) that defines how the search bar's scroll offset snaps to either its limit or 0 when a fling or a drag scrolls it into an intermediate position. |
| flingAnimationSpec | a [DecayAnimationSpec](/jetpack-compose/androidx.compose.animation/animation-core/interfaces/DecayAnimationSpec) that defines how to fling the search bar when the user flings the search bar itself, or the content beneath it. |
| reverseLayout | indicates that this behavior is applied to a scrollable content that has a reversed direction of scrolling and layout. |
```kotlin
@ExperimentalMaterial3Api
@Composable
fun enterAlwaysSearchBarScrollBehavior(
initialOffset: Float = 0f,
initialOffsetLimit: Float = -Float.MAX_VALUE,
canScroll: () -> Boolean = { true },
snapAnimationSpec: AnimationSpec = MotionSchemeKeyTokens.DefaultEffects.value(),
flingAnimationSpec: DecayAnimationSpec = rememberSplineBasedDecay(),
reverseLayout: Boolean = false,
): SearchBarScrollBehavior
```
```kotlin
@Composable
fun colors(
containerColor: Color = SearchBarTokens.ContainerColor.value,
dividerColor: Color = SearchViewTokens.DividerColor.value,
inputFieldColors: TextFieldColors = inputFieldColors(),
): SearchBarColors
```
Creates a [SearchBarColors](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarColors) that represents the different colors used in parts of the search
bar.
#### Parameters
| | |
| --- | --- |
| containerColor | the container color of the search bar |
| dividerColor | the color of the divider between the input field and the search results |
| inputFieldColors | the colors of the input field. This can be accessed using [SearchBarColors.inputFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarColors) and should be passed to the `inputField` slot of the search bar. |
containedColors
```kotlin
@Composable
fun containedColors(state: SearchBarState): SearchBarColors
```
Creates a [SearchBarColors](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarColors) that represents the different colors used in parts of the search
bar based on [SearchBarState](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarState).
This should be used in conjunction with an [ExpandedFullScreenContainedSearchBar](/jetpack-compose/androidx.compose.material3/material3/components/ExpandedFullScreenContainedSearchBar) and this
value's [inputFieldColors](#inputfieldcolors) passed to the associated `InputField`.
#### Parameters
| | |
| --- | --- |
| state | the state of the search bar. |
```kotlin
@Composable
fun appBarWithSearchColors(
searchBarColors: SearchBarColors = colors(),
scrolledSearchBarContainerColor: Color = ColorSchemeKeyTokens.SurfaceContainerHighest.value,
appBarContainerColor: Color = AppBarTokens.ContainerColor.value,
scrolledAppBarContainerColor: Color = AppBarTokens.OnScrollContainerColor.value,
appBarNavigationIconColor: Color = AppBarTokens.LeadingIconColor.value,
appBarActionIconColor: Color = AppBarTokens.TrailingIconColor.value,
): AppBarWithSearchColors
```
Creates an [AppBarWithSearchColors](/jetpack-compose/androidx.compose.material3/material3/classes/AppBarWithSearchColors) that represents the different colors used in parts of the
[AppBarWithSearch](/jetpack-compose/androidx.compose.material3/material3/components/AppBarWithSearch).
#### Parameters
| | |
| --- | --- |
| searchBarColors | the search bar colors |
| scrolledSearchBarContainerColor | the container color of the search bar when content is scrolled |
| appBarContainerColor | the app bar container color |
| scrolledAppBarContainerColor | the app bar container color when content is scrolled |
| appBarNavigationIconColor | the color used for the app bar navigation icon |
| appBarActionIconColor | the color used for the app bar action icons |
inputFieldColors
```kotlin
@Composable
fun inputFieldColors(
focusedTextColor: Color = SearchBarTokens.InputTextColor.value,
unfocusedTextColor: Color = SearchBarTokens.InputTextColor.value,
disabledTextColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
cursorColor: Color = FilledTextFieldTokens.CaretColor.value,
selectionColors: TextSelectionColors = LocalTextSelectionColors.current,
focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
disabledLeadingIconColor: Color =
FilledTextFieldTokens.DisabledLeadingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity
),
focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
disabledTrailingIconColor: Color =
FilledTextFieldTokens.DisabledTrailingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity
),
focusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
unfocusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
disabledPlaceholderColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
focusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value,
unfocusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value,
disabledPrefixColor: Color =
FilledTextFieldTokens.InputPrefixColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
focusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value,
unfocusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value,
disabledSuffixColor: Color =
FilledTextFieldTokens.InputSuffixColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
focusedContainerColor: Color = Color.Transparent,
unfocusedContainerColor: Color = Color.Transparent,
disabledContainerColor: Color = Color.Transparent,
): TextFieldColors
```
Creates a [TextFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/TextFieldColors) that represents the different colors used in the search bar input
field in different states.
Only a subset of the full list of [TextFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/TextFieldColors) parameters are used in the input field.
All other parameters have no effect.
#### Parameters
| | |
| --- | --- |
| focusedTextColor | the color used for the input text of this input field when focused |
| unfocusedTextColor | the color used for the input text of this input field when not focused |
| disabledTextColor | the color used for the input text of this input field when disabled |
| cursorColor | the cursor color for this input field |
| selectionColors | the colors used when the input text of this input field is selected |
| focusedLeadingIconColor | the leading icon color for this input field when focused |
| unfocusedLeadingIconColor | the leading icon color for this input field when not focused |
| disabledLeadingIconColor | the leading icon color for this input field when disabled |
| focusedTrailingIconColor | the trailing icon color for this input field when focused |
| unfocusedTrailingIconColor | the trailing icon color for this input field when not focused |
| disabledTrailingIconColor | the trailing icon color for this input field when disabled |
| focusedPlaceholderColor | the placeholder color for this input field when focused |
| unfocusedPlaceholderColor | the placeholder color for this input field when not focused |
| disabledPlaceholderColor | the placeholder color for this input field when disabled |
| focusedPrefixColor | the prefix color for this input field when focused |
| unfocusedPrefixColor | the prefix color for this input field when not focused |
| disabledPrefixColor | the prefix color for this input field when disabled |
| focusedSuffixColor | the suffix color for this input field when focused |
| unfocusedSuffixColor | the suffix color for this input field when not focused |
| disabledSuffixColor | the suffix color for this input field when disabled |
| focusedContainerColor | the container color for this input field when focused |
| unfocusedContainerColor | the container color for this input field when not focused |
| disabledContainerColor | the container color for this input field when disabled |
InputField
```kotlin
@ExperimentalMaterial3Api
@Composable
fun InputField(
textFieldState: TextFieldState,
searchBarState: SearchBarState,
onSearch: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
prefix: @Composable (() -> Unit)? = null,
suffix: @Composable (() -> Unit)? = null,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = inputFieldShape,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null,
) =
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.Default,
lineLimits = TextFieldLineLimits.SingleLine,
)
```
InputField
```kotlin
@ExperimentalMaterial3Api
@Composable
fun InputField(
textFieldState: TextFieldState,
searchBarState: SearchBarState,
onSearch: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
prefix: @Composable (() -> Unit)? = null,
suffix: @Composable (() -> Unit)? = null,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = inputFieldShape,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
lineLimits: TextFieldLineLimits = TextFieldLineLimits.SingleLine,
)
```
A text field to input a query in a search bar.
This overload of `InputField` uses [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) to keep track of the text content and
position of the cursor or selection, and [SearchBarState](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarState) to keep track of the state of the
search bar. It should be used with the search bar APIs which also accept a [SearchBarState](/jetpack-compose/androidx.compose.material3/material3/classes/SearchBarState).
#### Parameters
| | |
| --- | --- |
| textFieldState | [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) that holds the internal editing state of the input field. |
| searchBarState | the state of the search bar as a whole. |
| onSearch | the callback to be invoked when the input service triggers the `ImeAction.Search` action. The current query in the [textFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) comes as a parameter of the callback. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this input field. |
| enabled | the enabled state of this input field. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| readOnly | controls the editable state of the input field. When `true`, the field cannot be modified. However, a user can focus it and copy text from it. |
| textStyle | the style to be applied to the input text. Defaults to [LocalTextStyle](/jetpack-compose/androidx.compose.material3/material3/properties/LocalTextStyle). |
| placeholder | the placeholder to be displayed when the input text is empty. |
| leadingIcon | the leading icon to be displayed at the start of the input field. |
| trailingIcon | the trailing icon to be displayed at the end of the input field. |
| prefix | the optional prefix to be displayed before the input text. |
| suffix | the optional suffix to be displayed after the input text. |
| inputTransformation | optional [InputTransformation](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/InputTransformation) that will be used to transform changes to the [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will _not_ be applied when changing the [textFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. The transformation will not immediately affect the current [textFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState). |
| outputTransformation | optional [OutputTransformation](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OutputTransformation) that transforms how the contents of the text field are presented. |
| scrollState | scroll state that manages the horizontal scroll of the input field. |
| shape | the shape of the input field. |
| colors | [TextFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/TextFieldColors) that will be used to resolve the colors used for this input field in different states. See [SearchBarDefaults.inputFieldColors](/jetpack-compose/androidx.compose.material3/material3/objects/SearchBarDefaults). |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this input field. You can use this to change the search bar's appearance or preview the search bar in different states. Note that if `null` is provided, interactions will still happen internally. |
| keyboardOptions | software keyboard options that contains configuration such as [KeyboardType](/jetpack-compose/androidx.compose.ui/ui-text/classes/KeyboardType). Note that the [ImeAction](/jetpack-compose/androidx.compose.ui/ui-text/classes/ImeAction) will always be overwritten with `ImeAction.Search`. |
| lineLimits | whether the text field should be [TextFieldLineLimits.SingleLine](/jetpack-compose/androidx.compose.foundation/foundation/objects/TextFieldLineLimits.SingleLine), scroll horizontally, and ignore newlines; or [TextFieldLineLimits.MultiLine](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldLineLimits.MultiLine) and grow and scroll vertically. |
InputField
```kotlin
@ExperimentalMaterial3Api
@Composable
fun InputField(
state: TextFieldState,
onSearch: (String) -> Unit,
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
prefix: @Composable (() -> Unit)? = null,
suffix: @Composable (() -> Unit)? = null,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = inputFieldShape,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null,
)
```
A text field to input a query in a search bar.
This overload of `InputField` uses [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) to keep track of the text content and
position of the cursor or selection, and `expanded` and `onExpandedChange` to keep track of
the state of the search bar. It should be used with the search bar APIs which also accept
`expanded` and `onExpandedChange`.
#### Parameters
| | |
| --- | --- |
| state | [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) that holds the internal editing state of the input field. |
| onSearch | the callback to be invoked when the input service triggers the `ImeAction.Search` action. The current query in the [state](/jetpack-compose/androidx.compose.runtime/runtime/interfaces/State) comes as a parameter of the callback. |
| expanded | whether the search bar is expanded and showing search results. |
| onExpandedChange | the callback to be invoked when the search bar's expanded state is changed. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this input field. |
| enabled | the enabled state of this input field. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| readOnly | controls the editable state of the input field. When `true`, the field cannot be modified. However, a user can focus it and copy text from it. |
| textStyle | the style to be applied to the input text. Defaults to [LocalTextStyle](/jetpack-compose/androidx.compose.material3/material3/properties/LocalTextStyle). |
| placeholder | the placeholder to be displayed when the input text is empty. |
| leadingIcon | the leading icon to be displayed at the start of the input field. |
| trailingIcon | the trailing icon to be displayed at the end of the input field. |
| prefix | the optional prefix to be displayed before the input text. |
| suffix | the optional suffix to be displayed after the input text. |
| inputTransformation | optional [InputTransformation](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/InputTransformation) that will be used to transform changes to the [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will _not_ be applied when changing the [state](/jetpack-compose/androidx.compose.runtime/runtime/interfaces/State) programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. The transformation will not immediately affect the current [state](/jetpack-compose/androidx.compose.runtime/runtime/interfaces/State). |
| outputTransformation | optional [OutputTransformation](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/OutputTransformation) that transforms how the contents of the text field are presented. |
| scrollState | scroll state that manages the horizontal scroll of the input field. |
| shape | the shape of the input field. |
| colors | [TextFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/TextFieldColors) that will be used to resolve the colors used for this input field in different states. See [SearchBarDefaults.inputFieldColors](/jetpack-compose/androidx.compose.material3/material3/objects/SearchBarDefaults). |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this input field. You can use this to change the search bar's appearance or preview the search bar in different states. Note that if `null` is provided, interactions will still happen internally. |
```kotlin
@ExperimentalMaterial3Api
@Composable
fun InputField(
query: String,
onQueryChange: (String) -> Unit,
onSearch: (String) -> Unit,
expanded: Boolean,
onExpandedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
colors: TextFieldColors = inputFieldColors(),
interactionSource: MutableInteractionSource? = null,
)
```
A text field to input a query in a search bar.
This overload of `InputField` takes a `query` and `onQueryChange` callback to keep track of
the text content. Consider using the overload which takes a [TextFieldState](/jetpack-compose/androidx.compose.foundation/foundation/classes/TextFieldState) instead.
#### Parameters
| | |
| --- | --- |
| query | the query text to be shown in the 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. |
| expanded | whether the search bar is expanded and showing search results. |
| onExpandedChange | the callback to be invoked when the search bar's expanded state is changed. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this input field. |
| enabled | the enabled state of this input field. 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 `query` is empty. |
| leadingIcon | the leading icon to be displayed at the start of the input field. |
| trailingIcon | the trailing icon to be displayed at the end of the input field. |
| colors | [TextFieldColors](/jetpack-compose/androidx.compose.material3/material3/classes/TextFieldColors) that will be used to resolve the colors used for this input field in different states. See [SearchBarDefaults.inputFieldColors](/jetpack-compose/androidx.compose.material3/material3/objects/SearchBarDefaults). |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this input field. You can use this to change the search bar's appearance or preview the search bar in different states. Note that if `null` is provided, interactions will still happen internally. |
colors
```kotlin
@Composable
fun colors(
containerColor: Color = SearchBarTokens.ContainerColor.value,
dividerColor: Color = SearchViewTokens.DividerColor.value,
): SearchBarColors
```
inputFieldColors
```kotlin
@Composable
fun inputFieldColors(
focusedTextColor: Color = SearchBarTokens.InputTextColor.value,
unfocusedTextColor: Color = SearchBarTokens.InputTextColor.value,
disabledTextColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
cursorColor: Color = FilledTextFieldTokens.CaretColor.value,
selectionColors: TextSelectionColors = LocalTextSelectionColors.current,
focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
disabledLeadingIconColor: Color =
FilledTextFieldTokens.DisabledLeadingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity
),
focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
disabledTrailingIconColor: Color =
FilledTextFieldTokens.DisabledTrailingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity
),
focusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
unfocusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value,
disabledPlaceholderColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
): TextFieldColors
```
inputFieldColors
```kotlin
@Composable
fun inputFieldColors(
textColor: Color = SearchBarTokens.InputTextColor.value,
disabledTextColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
cursorColor: Color = FilledTextFieldTokens.CaretColor.value,
selectionColors: TextSelectionColors = LocalTextSelectionColors.current,
focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value,
disabledLeadingIconColor: Color =
FilledTextFieldTokens.DisabledLeadingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity
),
focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value,
disabledTrailingIconColor: Color =
FilledTextFieldTokens.DisabledTrailingIconColor.value.copy(
alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity
),
placeholderColor: Color = SearchBarTokens.SupportingTextColor.value,
disabledPlaceholderColor: Color =
FilledTextFieldTokens.DisabledInputColor.value.copy(
alpha = FilledTextFieldTokens.DisabledInputOpacity
),
) =
inputFieldColors(
focusedTextColor = textColor,
unfocusedTextColor = textColor,
disabledTextColor = disabledTextColor,
cursorColor = cursorColor,
selectionColors = selectionColors,
focusedLeadingIconColor = focusedLeadingIconColor,
unfocusedLeadingIconColor = unfocusedLeadingIconColor,
disabledLeadingIconColor = disabledLeadingIconColor,
focusedTrailingIconColor = focusedTrailingIconColor,
unfocusedTrailingIconColor = unfocusedTrailingIconColor,
disabledTrailingIconColor = disabledTrailingIconColor,
focusedPlaceholderColor = placeholderColor,
unfocusedPlaceholderColor = placeholderColor,
disabledPlaceholderColor = disabledPlaceholderColor,
)
```