Object

SearchBarDefaults

Defaults used in SearchBar and DockedSearchBar.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
@ExperimentalMaterial3Api
object SearchBarDefaults

Defaults used in SearchBar and DockedSearchBar.

Properties

Common
val TonalElevation: Dp

Default tonal elevation for a search bar.

Common
val ShadowElevation: Dp

Default shadow elevation for a search bar.

Common
Deprecated Renamed to TonalElevation. Not to be confused with ShadowElevation.
@Deprecated(
    message = "Renamed to . Not to be confused with ShadowElevation.",
    replaceWith = ReplaceWith(""),
    level = DeprecationLevel.WARNING,
)
val Elevation: Dp
Common
val InputFieldHeight: Dp

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

Common
val inputFieldShape: Shape

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

Common
val fullScreenShape: Shape

Default shape for a SearchBar in the expanded state.

Common
val collapsedContainedSearchBarColor: Color

Default container color for an ExpandedFullScreenContainedSearchBar in the collapsed state.

Common
val fullScreenContainedSearchBarColor: Color

Default container color for an ExpandedFullScreenContainedSearchBar in the expanded state.

Common
val dockedShape: Shape

Default shape for a DockedSearchBar.

Common
val dockedDropdownShape: Shape

Default shape for a drop-down containing search results attached to a DockedSearchBar.

Common
val dockedDropdownGapSize: Dp =  // TODO: replace with token.

Default gap size for a drop-down attached to a DockedSearchBar.

Common
val dockedDropdownScrimColor: Color

Default scrim color for a drop-down attached to a DockedSearchBar.

Common
val AppBarContentPadding = PaddingValues(all = 0.dp)

Default padding used for AppBarWithSearch content

Common
val windowInsets: WindowInsets

Default window insets for an AppBarWithSearch.

Common
val fullScreenWindowInsets: WindowInsets

Default window insets used and consumed by ExpandedFullScreenSearchBar.

Functions

enterAlwaysSearchBarScrollBehavior

@ExperimentalMaterial3Api
    @Composable
    fun enterAlwaysSearchBarScrollBehavior(
        initialOffset: Float = 0f,
        initialOffsetLimit: Float = -Float.MAX_VALUE,
        initialContentOffset: Float = 0f,
        canScroll: () -> Boolean = { true },
        snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value(),
        flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay(),
        reverseLayout: Boolean = false,
    ): SearchBarScrollBehavior

Returns a 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 is remembered across compositions.

Parameters
initialOffset the initial value for SearchBarScrollBehavior.scrollOffset. Should be between initialOffsetLimit and 0.
initialOffsetLimit the initial value for SearchBarScrollBehavior.scrollOffsetLimit, 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.
canScroll a callback used to determine whether scroll events are to be handled by this SearchBarScrollBehavior.
snapAnimationSpec an 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 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.

enterAlwaysSearchBarScrollBehavior

@ExperimentalMaterial3Api
    @Composable
    fun enterAlwaysSearchBarScrollBehavior(
        initialOffset: Float = 0f,
        initialOffsetLimit: Float = -Float.MAX_VALUE,
        canScroll: () -> Boolean = { true },
        snapAnimationSpec: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultEffects.value(),
        flingAnimationSpec: DecayAnimationSpec<Float> = rememberSplineBasedDecay(),
        reverseLayout: Boolean = false,
    ): SearchBarScrollBehavior

colors

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

Creates a 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 and should be passed to the inputField slot of the search bar.

containedColors

@Composable
    fun containedColors(state: SearchBarState): SearchBarColors

Creates a SearchBarColors that represents the different colors used in parts of the search bar based on SearchBarState.

This should be used in conjunction with an ExpandedFullScreenContainedSearchBar and this value's inputFieldColors passed to the associated InputField.

Parameters
state the state of the search bar.

appBarWithSearchColors

@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 that represents the different colors used in parts of the 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

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

@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

@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 to keep track of the text content and position of the cursor or selection, and 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.

Parameters
textFieldState 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 comes as a parameter of the callback.
modifier the 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.
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 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 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.
outputTransformation optional 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 that will be used to resolve the colors used for this input field in different states. See SearchBarDefaults.inputFieldColors.
interactionSource 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.
keyboardOptions software keyboard options that contains configuration such as KeyboardType. Note that the ImeAction will always be overwritten with ImeAction.Search.
lineLimits whether the text field should be TextFieldLineLimits.SingleLine, scroll horizontally, and ignore newlines; or TextFieldLineLimits.MultiLine and grow and scroll vertically.

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,
    )

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, 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 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 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 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.
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 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 optional 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 that will be used to resolve the colors used for this input field in different states. See SearchBarDefaults.inputFieldColors.
interactionSource 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(
        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 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 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 that will be used to resolve the colors used for this input field in different states. See SearchBarDefaults.inputFieldColors.
interactionSource 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,
    ): SearchBarColors

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
            ),
    ): TextFieldColors

inputFieldColors

@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,
        )