Compose Multiplatform Material3/androidx.compose.material3/SearchBarDefaults/InputField

InputField

@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, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, lineLimits: TextFieldLineLimits = TextFieldLineLimits.SingleLine, 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 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.

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.

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.

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

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