Search
Search is a standalone search component built from scratch.
This component provides a search input field with animated leading and trailing icons, including a back button, clear button, and optional action items. Search does not support content which needs to be handled separately with your method of choice.
The use of TextFieldValue query types instead of a String allows for more control and manipulation of the input field. This variant does not contain any nested content container and is meant to be used in a fully customisable way, where you can create your own solutions to the search field layout, placing the search bar where you need.
Parameters
The current text value of the search field as TextFieldValue.
Callback invoked when the search field text changes.
Callback invoked when the search action is triggered (e.g., IME search action).
Whether the search field is in expanded state, requesting focus and modifying visual elements.
Optional placeholder text displayed when the search field is empty.
Accessibility label for the search field.
Accessibility label for the clear button.
The Modifier to be applied to the search component.
List of action items displayed as icon buttons when the field is empty. Maximum 2 items recommended.
Whether the search field is enabled for user interaction. Defaults to true.
The size variant of the search component. Defaults to SearchSize.Large.
The MutableInteractionSource representing the stream of interactions for this component.
See also
Samples
var textFieldValueQuery by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
val isExpanded = rememberSaveable { mutableStateOf(false) }
val focusManager = LocalFocusManager.current
val keyboardController = LocalSoftwareKeyboardController.current
val furnitureList = listOf("Sofa", "Armchair", "Coffee Table", "Dining Table", "Dining Chair", "Bed Frame", "Mattress", "Wardrobe")
SkapaTheme2(isSystemInDarkTheme()) {
// TextFieldValue Search example with custom content on Expanded.
Row(
modifier = Modifier.windowInsetsPadding(WindowInsets(0.dp, SkapaSpacing.space75, 0.dp, 0.dp)),
verticalAlignment = Alignment.CenterVertically
) {
if (isExpanded.value) {
// Back navigation is handled by the view and maintained by the user.
IconButton(
// If there is a need to support RTL views, remember to mirror the icon.
iconResource = R.drawable.ic_arrow_left,
contentDescription = "Navigate back",
variant = IconButtonVariant.Tertiary,
size = IconButtonSize.Small,
modifier = Modifier.padding(start = SkapaSpacing.space25, end = SkapaSpacing.space75)
) {
isExpanded.value = false
keyboardController?.hide()
focusManager.clearFocus()
}
}
Search(
query = textFieldValueQuery,
onQueryChange = {
textFieldValueQuery = it
isExpanded.value = true
},
onSearch = {
keyboardController?.hide()
focusManager.clearFocus()
isExpanded.value = false
},
expanded = isExpanded.value,
placeholder = "Search",
searchFieldContentDescription = "Search field",
clearButtonContentDescription = "Clear query",
modifier = Modifier,
actionItems = listOf(
SearchActionItem(
iconResource = net.ikea.skapa.R.drawable.ic_search_microphone,
contentDescription = "Search by voice",
onClick = { }
),
SearchActionItem(
iconResource = net.ikea.skapa.R.drawable.ic_search_camera,
contentDescription = "Search by camera",
onClick = { }
)
),
size = SearchSize.Medium
)
}
if (isExpanded.value) {
Column {
LazyColumn {
val filteredList = furnitureList.filter {
it.toLowerCase(Locale.current).contains(textFieldValueQuery.text.toLowerCase(Locale.current))
}
if (textFieldValueQuery.text.isNotEmpty() && filteredList.isEmpty()) {
item {
Text(
text = "No product matched the query",
Modifier
.fillMaxWidth()
.padding(SkapaSpacing.space200),
textAlign = TextAlign.Center
)
}
} else {
items(filteredList) { item ->
Text(
text = item,
modifier = Modifier
.fillMaxWidth()
.padding(SkapaSpacing.space200)
)
}
}
}
}
}
}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
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)
)
}
}
}
}
}
}