State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

ExposedDropdownMenuBox

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

<a href="https://m3.material.io/components/menus/overview" class="external" target="_blank">Material Design Exposed Dropdown Menu</a>.

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Exposed dropdown menus display the currently selected item in a text field to which the menu is anchored. In some cases, it can accept and display user input (whether or not it’s listed as a menu choice). If the text field input is used to filter results in the menu, the component is also known as "autocomplete" or a "combobox".

!Exposed dropdown menu image(https://developer.android.com/images/reference/androidx/compose/material3/exposed-dropdown-menu.png)

The ExposedDropdownMenuBox is expected to contain a TextField (or OutlinedTextField) and ExposedDropdownMenuBoxScope.ExposedDropdownMenu as content.

An example of read-only Exposed Dropdown Menu:

Overloads

ExposedDropdownMenuBox

@ExperimentalMaterial3Api
@Composable
fun ExposedDropdownMenuBox(
    expanded: Boolean,
    onExpandedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable ExposedDropdownMenuBoxScope.() -> Unit
)

Parameters

NameDescription
expandedwhether the menu is expanded or not
onExpandedChangecalled when the exposed dropdown menu is clicked and the expansion state changes.
modifierthe Modifier to be applied to this exposed dropdown menu
contentthe content of this exposed dropdown menu, typically a TextField and an ExposedDropdownMenuBoxScope.ExposedDropdownMenu. The TextField within content should be passed the ExposedDropdownMenuBoxScope.menuAnchor modifier for proper menu behavior