SearchBarDefaults


Defaults used in SearchBar and DockedSearchBar.

Summary

Public functions

Unit
@ExperimentalMaterial3Api
@Composable
InputField(
    query: String,
    onQueryChange: (String) -> Unit,
    onSearch: (String) -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    placeholder: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    colors: TextFieldColors,
    interactionSource: MutableInteractionSource?
)

A text field to input a query in a search bar.

android
Unit
@ExperimentalMaterial3Api
@Composable
InputField(
    state: TextFieldState,
    onSearch: (String) -> Unit,
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    readOnly: Boolean,
    textStyle: TextStyle,
    placeholder: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    prefix: (@Composable () -> Unit)?,
    suffix: (@Composable () -> Unit)?,
    inputTransformation: InputTransformation?,
    outputTransformation: OutputTransformation?,
    scrollState: ScrollState,
    shape: Shape,
    colors: TextFieldColors,
    interactionSource: MutableInteractionSource?
)

A text field to input a query in a search bar.

android
SearchBarColors
@Composable
colors(
    containerColor: Color,
    dividerColor: Color,
    inputFieldColors: TextFieldColors
)

Creates a SearchBarColors that represents the different colors used in parts of the search bar in different states.

android
TextFieldColors
@Composable
inputFieldColors(
    focusedTextColor: Color,
    unfocusedTextColor: Color,
    disabledTextColor: Color,
    cursorColor: Color,
    selectionColors: TextSelectionColors,
    focusedLeadingIconColor: Color,
    unfocusedLeadingIconColor: Color,
    disabledLeadingIconColor: Color,
    focusedTrailingIconColor: Color,
    unfocusedTrailingIconColor: Color,
    disabledTrailingIconColor: Color,
    focusedPlaceholderColor: Color,
    unfocusedPlaceholderColor: Color,
    disabledPlaceholderColor: Color,
    focusedPrefixColor: Color,
    unfocusedPrefixColor: Color,
    disabledPrefixColor: Color,
    focusedSuffixColor: Color,
    unfocusedSuffixColor: Color,
    disabledSuffixColor: Color,
    focusedContainerColor: Color,
    unfocusedContainerColor: Color,
    disabledContainerColor: Color
)

Creates a TextFieldColors that represents the different colors used in the search bar input field in different states.

android

Public properties

Dp

This property is deprecated. Renamed to TonalElevation.

android
Dp

Default height for a search bar's input field, or a search bar in the unexpanded state.

android
Dp

Default shadow elevation for a search bar.

android
Dp

Default tonal elevation for a search bar.

android
Shape

Default shape for a DockedSearchBar.

android
Shape

Default shape for a SearchBar in the expanded state.

android
Shape

Default shape for a search bar's input field, or a search bar in the unexpanded state.

android
WindowInsets

Default window insets for a SearchBar.

android

Public functions

InputField

@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
): Unit

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 instead.

Parameters
query: String

the query text to be shown in the input field.

onQueryChange: (String) -> Unit

the callback to be invoked when the input service updates the query. An updated text comes as a parameter of the callback.

onSearch: (String) -> Unit

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: Boolean

whether the search bar is expanded and showing search results.

onExpandedChange: (Boolean) -> Unit

the callback to be invoked when the search bar's expanded state is changed.

modifier: Modifier = Modifier

the Modifier to be applied to this input field.

enabled: Boolean = true

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: (@Composable () -> Unit)? = null

the placeholder to be displayed when the query is empty.

leadingIcon: (@Composable () -> Unit)? = null

the leading icon to be displayed at the start of the input field.

trailingIcon: (@Composable () -> Unit)? = null

the trailing icon to be displayed at the end of the input field.

colors: TextFieldColors = inputFieldColors()

TextFieldColors that will be used to resolve the colors used for this input field in different states. See SearchBarDefaults.inputFieldColors.

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.

InputField

@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
): Unit

A text field to input a query in a search bar.

This overload of InputField uses TextFieldState to keep track of the text content and position of the cursor or selection. It is the recommended overload to use with SearchBar and DockedSearchBar.

Parameters
state: TextFieldState

TextFieldState that holds the internal editing state of the input field.

onSearch: (String) -> Unit

the callback to be invoked when the input service triggers the ImeAction.Search action. The current query in the state comes as a parameter of the callback.

expanded: Boolean

whether the search bar is expanded and showing search results.

onExpandedChange: (Boolean) -> Unit

the callback to be invoked when the search bar's expanded state is changed.

modifier: Modifier = Modifier

the Modifier to be applied to this input field.

enabled: Boolean = true

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: Boolean = false

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: TextStyle = LocalTextStyle.current

the style to be applied to the input text. Defaults to LocalTextStyle.

placeholder: (@Composable () -> Unit)? = null

the placeholder to be displayed when the input text is empty.

leadingIcon: (@Composable () -> Unit)? = null

the leading icon to be displayed at the start of the input field.

trailingIcon: (@Composable () -> Unit)? = null

the trailing icon to be displayed at the end of the input field.

prefix: (@Composable () -> Unit)? = null

the optional prefix to be displayed before the input text.

suffix: (@Composable () -> Unit)? = null

the optional suffix to be displayed after the input text.

inputTransformation: InputTransformation? = null

optional InputTransformation that will be used to transform changes to the 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 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.

outputTransformation: OutputTransformation? = null

optional OutputTransformation that transforms how the contents of the text field are presented.

scrollState: ScrollState = rememberScrollState()

scroll state that manages the horizontal scroll of the input field.

shape: Shape = inputFieldShape

the shape of the input field.

colors: TextFieldColors = inputFieldColors()

TextFieldColors that will be used to resolve the colors used for this input field in different states. See SearchBarDefaults.inputFieldColors.

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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

@Composable
fun colors(
    containerColor: Color = SearchBarTokens.ContainerColor.value,
    dividerColor: Color = SearchViewTokens.DividerColor.value,
    inputFieldColors: TextFieldColors = inputFieldColors( focusedContainerColor = containerColor, unfocusedContainerColor = containerColor, disabledContainerColor = containerColor, )
): SearchBarColors

Creates a SearchBarColors that represents the different colors used in parts of the search bar in different states.

Parameters
containerColor: Color = SearchBarTokens.ContainerColor.value

the container color of the search bar

dividerColor: Color = SearchViewTokens.DividerColor.value

the color of the divider between the input field and the search results

inputFieldColors: TextFieldColors = inputFieldColors( focusedContainerColor = containerColor, unfocusedContainerColor = containerColor, disabledContainerColor = containerColor, )

the colors of the input field. This can be accessed using SearchBarColors.inputFieldColors and should be passed to the inputField slot of the search bar.

inputFieldColors

@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 = SearchBarTokens.ContainerColor.value,
    unfocusedContainerColor: Color = SearchBarTokens.ContainerColor.value,
    disabledContainerColor: Color = SearchBarTokens.ContainerColor.value
): TextFieldColors

Creates a 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 parameters are used in the input field. All other parameters have no effect.

Parameters
focusedTextColor: Color = SearchBarTokens.InputTextColor.value

the color used for the input text of this input field when focused

unfocusedTextColor: Color = SearchBarTokens.InputTextColor.value

the color used for the input text of this input field when not focused

disabledTextColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity )

the color used for the input text of this input field when disabled

cursorColor: Color = FilledTextFieldTokens.CaretColor.value

the cursor color for this input field

selectionColors: TextSelectionColors = LocalTextSelectionColors.current

the colors used when the input text of this input field is selected

focusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value

the leading icon color for this input field when focused

unfocusedLeadingIconColor: Color = SearchBarTokens.LeadingIconColor.value

the leading icon color for this input field when not focused

disabledLeadingIconColor: Color = FilledTextFieldTokens.DisabledLeadingIconColor.value.copy( alpha = FilledTextFieldTokens.DisabledLeadingIconOpacity )

the leading icon color for this input field when disabled

focusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value

the trailing icon color for this input field when focused

unfocusedTrailingIconColor: Color = SearchBarTokens.TrailingIconColor.value

the trailing icon color for this input field when not focused

disabledTrailingIconColor: Color = FilledTextFieldTokens.DisabledTrailingIconColor.value.copy( alpha = FilledTextFieldTokens.DisabledTrailingIconOpacity )

the trailing icon color for this input field when disabled

focusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value

the placeholder color for this input field when focused

unfocusedPlaceholderColor: Color = SearchBarTokens.SupportingTextColor.value

the placeholder color for this input field when not focused

disabledPlaceholderColor: Color = FilledTextFieldTokens.DisabledInputColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity )

the placeholder color for this input field when disabled

focusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value

the prefix color for this input field when focused

unfocusedPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value

the prefix color for this input field when not focused

disabledPrefixColor: Color = FilledTextFieldTokens.InputPrefixColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity )

the prefix color for this input field when disabled

focusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value

the suffix color for this input field when focused

unfocusedSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value

the suffix color for this input field when not focused

disabledSuffixColor: Color = FilledTextFieldTokens.InputSuffixColor.value.copy( alpha = FilledTextFieldTokens.DisabledInputOpacity )

the suffix color for this input field when disabled

focusedContainerColor: Color = SearchBarTokens.ContainerColor.value

the container color for this input field when focused

unfocusedContainerColor: Color = SearchBarTokens.ContainerColor.value

the container color for this input field when not focused

disabledContainerColor: Color = SearchBarTokens.ContainerColor.value

the container color for this input field when disabled

Public properties

Elevation

val ElevationDp

InputFieldHeight

val InputFieldHeightDp

Default height for a search bar's input field, or a search bar in the unexpanded state.

ShadowElevation

val ShadowElevationDp

Default shadow elevation for a search bar.

TonalElevation

val TonalElevationDp

Default tonal elevation for a search bar.

dockedShape

val dockedShapeShape

Default shape for a DockedSearchBar.

fullScreenShape

val fullScreenShapeShape

Default shape for a SearchBar in the expanded state.

inputFieldShape

val inputFieldShapeShape

Default shape for a search bar's input field, or a search bar in the unexpanded state.

windowInsets

val windowInsetsWindowInsets

Default window insets for a SearchBar.