---
title: "SelectableDropdownMenuItem"
description: "Material Design dropdown menu Menus display a list of choices on a temporary surface."
type: "component"
lastmod: "2026-08-27"
---
## API Reference

### SelectableDropdownMenuItem

> Source set: Common

```kotlin
@Composable
public fun SelectableDropdownMenuItem(
    selected: Boolean,
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    shapes: MenuItemShapes,
    modifier: Modifier = Modifier,
    leadingIcon: @Composable (() -> Unit)? = null,
    selectedLeadingIcon: @Composable (() -> Unit)? = null,
    trailingContent: @Composable (() -> Unit)? = null,
    supportingText: @Composable (() -> Unit)? = null,
    enabled: Boolean = true,
    colors: SelectableMenuItemColors = MenuDefaults.selectableItemColors(),
    horizontalArrangement: Arrangement.Horizontal =
        MenuDefaults.DropdownMenuItemHorizontalArrangement,
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuSelectableItemContentPadding,
    interactionSource: MutableInteractionSource? = null,
)
```

#### Parameters

| | |
| --- | --- |
| selected | whether this menu item is currently selected. |
| onClick | called when this menu item is clicked. |
| text | text of the menu item. |
| shapes | [MenuItemShapes](/jetpack-compose/androidx.compose.material3/material3/classes/MenuItemShapes) that will be used to resolve the shapes for this menu item. The shape of this item is determined by the value of [selected](/jetpack-compose/androidx.compose.foundation/foundation/functions/selected). The shapes provided should be determined by the number of items in the group or menu as well as the item's position in the menu. There is a convenience function that can be used to easily determine the shape to be used at [MenuDefaults.itemShape](/jetpack-compose/androidx.compose.material3/material3/objects/MenuDefaults) |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this menu item. |
| leadingIcon | optional leading icon to be displayed when the item is unchecked. |
| selectedLeadingIcon | optional leading icon to be displayed when the item is selected. |
| trailingContent | optional trailing content to be displayed at the end of the item's text. |
| supportingText | optional supporting text of the menu item. |
| enabled | controls the enabled state of this menu item. When `false`, this component will not respond to user input. |
| colors | [SelectableMenuItemColors](/jetpack-compose/androidx.compose.material3/material3/classes/SelectableMenuItemColors) that will be used to resolve the colors for this menu item. There are two predefined [SelectableMenuItemColors](/jetpack-compose/androidx.compose.material3/material3/classes/SelectableMenuItemColors) at [MenuDefaults.selectableItemColors](/jetpack-compose/androidx.compose.material3/material3/objects/MenuDefaults) and [MenuDefaults.selectableItemVibrantColors](/jetpack-compose/androidx.compose.material3/material3/objects/MenuDefaults) which you can use or modify. |
| horizontalArrangement | the horizontal arrangement of the menu item's children. |
| contentPadding | the padding applied to the content of this menu item. |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/Interaction)s for this menu item. |

## Code Examples

### ExposedDropdownMenuSample

```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Sampled
@Composable
fun ExposedDropdownMenuSample() {
    val options: List<String> = SampleData.take(5)
    var expanded by remember { mutableStateOf(false) }
    val textFieldState = rememberTextFieldState(options[0])
    var checkedIndex by rememberSaveable { mutableIntStateOf(0) }

    ExposedDropdownMenuBox(expanded = expanded, onExpandedChange = { expanded = it }) {
        TextField(
            // The `menuAnchor` modifier must be passed to the text field to handle
            // expanding/collapsing the menu on click. A read-only text field has
            // the anchor type `PrimaryNotEditable`.
            modifier = Modifier.menuAnchor(ExposedDropdownMenuAnchorType.PrimaryNotEditable),
            state = textFieldState,
            readOnly = true,
            lineLimits = TextFieldLineLimits.SingleLine,
            label = { Text("Label") },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            containerColor = MenuDefaults.groupStandardContainerColor,
            shape = MenuDefaults.standaloneGroupShape,
        ) {
            val optionCount = options.size
            options.forEachIndexed { index, option ->
                SelectableDropdownMenuItem(
                    shapes = MenuDefaults.itemShape(index, optionCount),
                    text = { Text(option, style = MaterialTheme.typography.bodyLarge) },
                    selected = index == checkedIndex,
                    onClick = {
                        textFieldState.setTextAndPlaceCursorAtEnd(option)
                        checkedIndex = index
                        expanded = false
                    },
                    selectedLeadingIcon = {
                        Icon(
                            Icons.Filled.Check,
                            modifier = Modifier.size(MenuDefaults.LeadingIconSize),
                            contentDescription = null,
                        )
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}
```