Design/net.ikea.skapa.ui.components/Search

Search

@Composable
fun Search(query: String, onQueryChange: (String) -> Unit, onSearch: (String) -> Unit, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, placeholder: String?, clearButtonContentDescription: String?, modifier: Modifier = Modifier, actionItems: List<SearchActionItem> = emptyList(), windowInsets: WindowInsets = SearchBarDefaults.windowInsets, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable ColumnScope.() -> Unit)

Search provides an input field for searching content within a site or app to find specific items. TODO Add info about using search with and without expanded state.

Parameters

query

The current text value of the search field.

onQueryChange

The callback that is called when the value of the search field changes.

onSearch

The callback that is called when the search IME action is triggered.

expanded

Boolean indicating whether the search field is expanded or not.

onExpandedChange

The callback that is called when the expanded state changes.

placeholder

The placeholder text to display when the search field is empty.

clearButtonContentDescription

Parameters for the clear button.

modifier

The modifier to apply to the search field.

actionItems

List of action items to be displayed in the search field. Use up to 2 action items.

windowInsets

The window insets to apply to the search field.

interactionSource

The interaction source for the search field.

content

The content to be displayed for the search results.

See also

Samples

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Search
import net.ikea.skapa.ui.components.SearchActionItem

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    var query by rememberSaveable { mutableStateOf("") }
    val keyboardController = LocalSoftwareKeyboardController.current

    Column {
        // Inline search
        Search(
            query = query,
            onQueryChange = { query = it },
            onSearch = {
                keyboardController?.hide()
            },
            expanded = false,
            onExpandedChange = { /* Not used */ },
            placeholder = "Search",
            clearButtonContentDescription = "Clear input",
            modifier = Modifier,
            actionItems = listOf(
                SearchActionItem(
                    iconResource = R.drawable.ic_search_camera,
                    contentDescription = "Search by camera",
                    onClick = { /* Open camera */ }
                )
            ),
            windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp),
            interactionSource = remember { MutableInteractionSource() }
        ) { /* Not used */ }

        // Full screen search using `expanded` parameter
        var expanded by rememberSaveable { mutableStateOf(false) }
        Search(
            query = query,
            onQueryChange = {
                query = it
                expanded = true
            },
            onSearch = {
                keyboardController?.hide()
            },
            expanded = expanded,
            onExpandedChange = { expanded = it },
            placeholder = "Search full screen",
            clearButtonContentDescription = "Clear input",
            modifier = Modifier,
            actionItems = listOf(
                SearchActionItem(
                    iconResource = R.drawable.ic_search_camera,
                    contentDescription = "Search by camera",
                    onClick = { /* Open camera */ }
                )
            ),
            windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp),
            interactionSource = remember { MutableInteractionSource() }
        ) { /* Use this to show search results */ }
    }
} 
   //sampleEnd
}