SelectableDropdownMenuItem

Functions summary

Unit
@Composable
SelectableDropdownMenuItem(
    selected: Boolean,
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    shapes: MenuItemShapes,
    modifier: Modifier,
    leadingIcon: (@Composable () -> Unit)?,
    selectedLeadingIcon: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    supportingText: (@Composable () -> Unit)?,
    enabled: Boolean,
    colors: SelectableMenuItemColors,
    horizontalArrangement: Arrangement.Horizontal,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?
)

Material Design dropdown menu

Cmn

Functions

SelectableDropdownMenuItem

@Composable
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
): Unit

Material Design dropdown menu

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

A menu item that changes its styling depending on the selected state.

This composable is suitable for menu items that represent an on/off setting, behaving like a radio button within the menu.

Dropdown menu
image

Example usage:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenu
import androidx.compose.material3.ExposedDropdownMenuAnchorType
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MenuDefaults
import androidx.compose.material3.SelectableDropdownMenuItem
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

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,
            )
        }
    }
}
Parameters
selected: Boolean

whether this menu item is currently selected.

onClick: () -> Unit

called when this menu item is clicked.

text: @Composable () -> Unit

text of the menu item.

shapes: MenuItemShapes

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. 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

modifier: Modifier = Modifier

the Modifier to be applied to this menu item.

leadingIcon: (@Composable () -> Unit)? = null

optional leading icon to be displayed when the item is unchecked.

selectedLeadingIcon: (@Composable () -> Unit)? = null

optional leading icon to be displayed when the item is selected.

trailingContent: (@Composable () -> Unit)? = null

optional trailing content to be displayed at the end of the item's text.

supportingText: (@Composable () -> Unit)? = null

optional supporting text of the menu item.

enabled: Boolean = true

controls the enabled state of this menu item. When false, this component will not respond to user input.

colors: SelectableMenuItemColors = MenuDefaults.selectableItemColors()

SelectableMenuItemColors that will be used to resolve the colors for this menu item. There are two predefined SelectableMenuItemColors at MenuDefaults.selectableItemColors and MenuDefaults.selectableItemVibrantColors which you can use or modify.

horizontalArrangement: Arrangement.Horizontal = MenuDefaults.DropdownMenuItemHorizontalArrangement

the horizontal arrangement of the menu item's children.

contentPadding: PaddingValues = MenuDefaults.DropdownMenuSelectableItemContentPadding

the padding applied to the content of this menu item.

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this menu item.