@Composable public fun SearchInput(query: String,onValueChange: (String) -> Unit,modifier: Modifier = Modifier,onSearchStarted: () -> Unit = {},leadingIcon: @Composable RowScope.() -> Unit = { DefaultSearchLeadingIcon() }, label: @Composable () -> Unit = { DefaultSearchLabel() }, ) { var isFocused by remember { mutableStateOf(false) } val trailingIcon: (@Composable RowScope.() -> Unit)? = if (isFocused && query.isNotEmpty()) { @Composable { IconButton( modifier = Modifier .weight(1f) .size(24.dp), onClick = { onValueChange("") }, content = { Icon( painter = painterResource(id = R.drawable.stream_compose_ic_clear), contentDescription = stringResource(id = R.string.stream_compose_search_input_cancel), tint = ChatTheme.colors.textLowEmphasis, ) } ) } } else null InputField( modifier = modifier .onFocusEvent { newState -> val wasPreviouslyFocused = isFocused if (!wasPreviouslyFocused && newState.isFocused) { onSearchStarted() }  isFocused = newState.isFocused},value = query,onValueChange = onValueChange, decorationBox = { innerTextField ->Row(Modifier.fillMaxWidth(),verticalAlignment = Alignment.CenterVertically) {leadingIcon() Box(modifier = Modifier.weight(8f)) { if (query.isEmpty()) { label() } innerTextField() } trailingIcon?.invoke(this) } }, maxLines = 1, innerPadding = PaddingValues(4.dp) ) }
The search component that allows the user to fill in a search query and filter their items. It also holds a clear action, that is active when the search is in focus and not empty, to clear the input. @param query Current query value. @param onValueChange Handler when the value changes. @param modifier Modifier for styling. @param onSearchStarted Handler when the search starts, by focusing the input field. @param leadingIcon The icon at the start of the search component that's customizable, but shows [DefaultSearchLeadingIcon] by default. @param label The label shown in the search component, when there's no input.