SingleChoiceComboBox
A ComboBox component that allows users to select a single option from a dropdown list. It combines a text field with a dropdown menu, providing a searchable interface for selecting options.
Parameters
The state of the text field that controls the input value
Whether the dropdown menu is currently expanded
Callback invoked when the expanded state changes
Callback invoked when the dropdown menu should be dismissed
Modifier to be applied to the ComboBox
Whether the ComboBox is enabled
Whether the field is required
Optional label text displayed above the ComboBox
Optional placeholder text shown when the field is empty
Optional helper text displayed below the ComboBox
Optional composable content displayed at the start of the ComboBox
Optional composable content displayed at the end of the ComboBox, if not provided, a default trailing icon will be used.
Optional status of the form field (e.g., error, success)
Optional message associated with the status
Optional transformation applied to input text
Options for the keyboard
Optional handler for keyboard actions
Limits for the number of lines in the text field
Optional callback for text layout changes
Optional interaction source for the ComboBox
Optional transformation applied to output text
Scroll state for the text field
Content of the dropdown menu, using SingleChoiceDropdownItemColumnScope
See also
for a version that supports multiple selections
Samples
val state = rememberTextFieldState()
var expanded by remember { mutableStateOf(false) }
SingleChoiceComboBox(
modifier = Modifier.fillMaxWidth(),
state = state,
expanded = expanded,
onExpandedChange = { expanded = it },
onDismissRequest = { expanded = false },
required = true,
label = "Select a book",
placeholder = "Choose a book…",
helper = "Click the selected item again to deselect it",
dropdownContent = {
books.forEach { book ->
val isSelected = book.title == state.text.toString()
DropdownMenuItem(
text = { Text(book.title) },
onClick = {
if (isSelected) state.clearText() else state.setTextAndPlaceCursorAtEnd(book.title)
expanded = false
},
selected = isSelected,
)
}
},
)val state = rememberTextFieldState()
var expanded by remember { mutableStateOf(false) }
var searchText by remember { mutableStateOf("") }
val filteredBooks by remember(searchText) {
derivedStateOf {
if (searchText.isBlank()) {
books
} else {
books.filter { it.title.contains(searchText, ignoreCase = true) }
}
}
}
LaunchedEffect(Unit) {
snapshotFlow { state.text }
.debounce(300.milliseconds)
.onEach { searchText = it.toString() }
.collect()
}
SingleChoiceComboBox(
modifier = Modifier.fillMaxWidth(),
state = state,
expanded = expanded,
onExpandedChange = { expanded = it },
onDismissRequest = { expanded = false },
required = true,
label = "Search books",
placeholder = "Type to filter…",
dropdownContent = {
filteredBooks.forEach { book ->
DropdownMenuItem(
text = { Text(book.title) },
onClick = {
state.setTextAndPlaceCursorAtEnd(book.title)
expanded = false
},
selected = book.title == state.text.toString(),
)
}
},
)