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

Public properties
Dp

This property is deprecated. Renamed to TonalElevation.
Cmn
Dp

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

Default shadow elevation for a search bar.
Cmn
Dp

Default tonal elevation for a search bar.
Cmn
Shape

Default shape for a DockedSearchBar.
Cmn
Shape

Default shape for a SearchBar in the expanded state.
Cmn
Shape

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

Default window insets for a SearchBar.
Cmn

Public functions

InputField

Cmn
Added in 1.3.0
@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

Cmn
Added in 1.4.0-alpha04
@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

Cmn 
@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

Cmn 
@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

Cmn
Added in 1.1.0
Deprecated in 1.2.0
val Elevation: Dp

InputFieldHeight

Cmn
Added in 1.1.0
val InputFieldHeight: Dp

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

ShadowElevation

Cmn
Added in 1.2.0
val ShadowElevation: Dp

Default shadow elevation for a search bar.

TonalElevation

Cmn
Added in 1.2.0
val TonalElevation: Dp

Default tonal elevation for a search bar.

dockedShape

Cmn
Added in 1.1.0
val dockedShape: Shape

Default shape for a DockedSearchBar.

fullScreenShape

Cmn
Added in 1.1.0
val fullScreenShape: Shape

Default shape for a SearchBar in the expanded state.

inputFieldShape

Cmn
Added in 1.1.0
val inputFieldShape: Shape

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

windowInsets

Cmn
Added in 1.1.0
val windowInsets: WindowInsets

Default window insets for a SearchBar.