Search
Search provides an input field for searching content within a site or app to find specific items.
The component supports both inline and full-screen search modes. In inline mode, the search field is displayed within the current layout, while in full-screen mode, it expands to cover the entire screen. Check the Search sample for an example of how to use it.
Parameters
The current text value of the search field.
The callback that is called when the value of the search field changes.
The callback that is called when the search IME action is triggered.
Boolean indicating whether the search field is expanded or not.
The callback that is called when the expanded state changes.
The placeholder text to display when the search field is empty.
Semantic text for the Clear button.
Semantic text for the Back button.
The modifier to apply to the search field.
List of action items to be displayed in the search field. Use up to 2 action items.
The window insets to apply to the search field.
The interaction source for the search field.
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.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
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.text.intl.Locale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.toLowerCase
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
SkapaTheme2(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",
backButtonContentDescription = null, // No back button in inline search
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) }
val furnitureList = listOf("Sofa", "Armchair", "Coffee Table", "Dining Table", "Dining Chair", "Bed Frame", "Mattress", "Wardrobe")
Search(
query = query,
onQueryChange = {
query = it
expanded = true // Make sure to put this view in its own view to avoid crashes
},
onSearch = {
keyboardController?.hide()
// Potentially set `expanded = false` and navigate to search results page
},
expanded = expanded,
onExpandedChange = { expanded = it },
placeholder = "Search full screen",
clearButtonContentDescription = "Clear input",
backButtonContentDescription = "Navigate back",
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 */
LazyColumn {
val filteredList = furnitureList.filter { it.toLowerCase(Locale.current).contains(query.toLowerCase(Locale.current)) }
if (query.isNotEmpty() && filteredList.isEmpty()) {
item {
Text(
text = "No product matched the query",
modifier = Modifier
.fillMaxWidth()
.padding(SkapaSpacing.space200),
textAlign = TextAlign.Center
)
}
} else {
items(filteredList) { item ->
Text(
text = item,
modifier = Modifier
.fillMaxWidth()
.padding(SkapaSpacing.space200)
)
}
}
}
}
}
}
//sampleEnd
}