Dropdown menus and exposed dropdown selection
Menus display a list of choices on a temporary surface. A DropdownMenu anchors to a trigger such as a button, while an ExposedDropdownMenuBox pairs a text field with a menu so people can pick a value.
A menu anchored to a button via an expanded flag.
var expanded by remember { mutableStateOf(false) }
Box {
Button(onClick = { expanded = true }) { Text("Options") }
DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
DropdownMenuItem(text = { Text("Edit") }, onClick = { expanded = false })
DropdownMenuItem(text = { Text("Delete") }, onClick = { expanded = false })
}
}A read-only text field reveals a menu of selectable values.
val options = listOf("Low", "Medium", "High")
var expanded by remember { mutableStateOf(false) }
var selected by remember { mutableStateOf(options[0]) }
ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = { expanded = it }) {
OutlinedTextField(
value = selected,
onValueChange = {},
readOnly = true,
label = { Text("Priority") },
trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded) },
modifier = Modifier.menuAnchor()
)
ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
options.forEach { option ->
DropdownMenuItem(
text = { Text(option) },
onClick = { selected = option; expanded = false }
)
}
}
}