# CheckableDropdownMenuItem

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckableDropdownMenuItem.composable#CheckableDropdownMenuItem(kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.material3.MenuItemShapes,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SelectableMenuItemColors,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)( checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, text: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuItemShapes, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, checkedLeadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingText: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableMenuItemColors, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` [Material Design dropdown menu](https://m3.material.io/components/menus/overview) | Cmn |

## Functions

### CheckableDropdownMenuItem

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Menu.kt+function:CheckableDropdownMenuItem)

```
@Composable
fun CheckableDropdownMenuItem(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    text: @Composable () -> Unit,
    shapes: MenuItemShapes,
    modifier: Modifier = Modifier,
    leadingIcon: (@Composable () -> Unit)? = null,
    checkedLeadingIcon: (@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](https://m3.material.io/components/menus/overview)

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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CheckableDropdownMenuItem(kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.material3.MenuItemShapes,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SelectableMenuItemColors,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)` state.

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

![Dropdown menu
image](https://developer.android.com/images/reference/androidx/compose/material3/exposed-dropdown-menu-selectable-items.png)

Example usage:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Info
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.ButtonGroup
import androidx.compose.material3.CheckableDropdownMenuItem
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuGroup
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.DropdownMenuPopup
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MenuDefaults
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.util.fastForEachIndexed

val groupInteractionSource = remember { MutableInteractionSource() }
var expanded by remember { mutableStateOf(false) }
val groupLabels = listOf("Modification", "Navigation")
val groupItemLabels = listOf(listOf("Edit", "Settings"), listOf("Home", "More Options"))
val groupItemLeadingIcons =
    listOf(
        listOf(Icons.Outlined.Edit, Icons.Outlined.Settings),
        listOf(null, Icons.Outlined.Info),
    )
val groupItemCheckedLeadingIcons =
    listOf(
        listOf(Icons.Filled.Edit, Icons.Filled.Settings),
        listOf(Icons.Filled.Check, Icons.Filled.Info),
    )
val groupItemTrailingIcons: List<List<ImageVector?>> =
    listOf(listOf(null, null), listOf(Icons.Outlined.Home, Icons.Outlined.MoreVert))
val groupItemCheckedTrailingIcons: List<List<ImageVector?>> =
    listOf(listOf(null, null), listOf(Icons.Filled.Home, Icons.Filled.MoreVert))
val groupItemSupportingText: List<List<String?>> =
    listOf(listOf("Edit mode", null), listOf(null, "Opens menu"))
val checked = remember {
    listOf(mutableStateListOf(false, false), mutableStateListOf(false, false))
}

Box(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopStart)) {
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = {
            PlainTooltip(
                Modifier.semantics {
                    // TODO(b/496338253): Remove this modifier once bug where tooltip text is
                    //  not announced by a11y screen readers is resolved.
                    liveRegion = LiveRegionMode.Assertive
                    paneTitle = "Localized description"
                }
            ) {
                Text("Localized description")
            }
        },
        state = rememberTooltipState(),
    ) {
        IconButton(onClick = { expanded = true }) {
            Icon(Icons.Default.MoreVert, contentDescription = "Localized description")
        }
    }
    DropdownMenuPopup(expanded = expanded, onDismissRequest = { expanded = false }) {
        val groupCount = groupLabels.size
        groupLabels.fastForEachIndexed { groupIndex, label ->
            DropdownMenuGroup(
                shapes = MenuDefaults.groupShape(groupIndex, groupCount),
                interactionSource = groupInteractionSource,
            ) {
                MenuDefaults.DropdownMenuGroupLabel { Text(label) }
                HorizontalDivider(
                    modifier = Modifier.padding(MenuDefaults.HorizontalDividerPadding)
                )
                val groupItemCount = groupItemLabels[groupIndex].size
                groupItemLabels[groupIndex].fastForEachIndexed { itemIndex, itemLabel ->
                    CheckableDropdownMenuItem(
                        text = { Text(itemLabel) },
                        supportingText =
                            groupItemSupportingText[groupIndex][itemIndex]?.let { supportingText
                                ->
                                { Text(supportingText) }
                            },
                        shapes = MenuDefaults.itemShape(itemIndex, groupItemCount),
                        leadingIcon =
                            groupItemLeadingIcons[groupIndex][itemIndex]?.let { iconData ->
                                {
                                    Icon(
                                        iconData,
                                        modifier = Modifier.size(MenuDefaults.LeadingIconSize),
                                        contentDescription = null,
                                    )
                                }
                            },
                        checkedLeadingIcon = {
                            Icon(
                                groupItemCheckedLeadingIcons[groupIndex][itemIndex],
                                modifier = Modifier.size(MenuDefaults.LeadingIconSize),
                                contentDescription = null,
                            )
                        },
                        trailingContent =
                            if (checked[groupIndex][itemIndex]) {
                                groupItemCheckedTrailingIcons[groupIndex][itemIndex]?.let {
                                    iconData ->
                                    {
                                        Icon(
                                            iconData,
                                            modifier =
                                                Modifier.size(MenuDefaults.TrailingIconSize),
                                            contentDescription = null,
                                        )
                                    }
                                }
                            } else {
                                groupItemTrailingIcons[groupIndex][itemIndex]?.let { iconData ->
                                    {
                                        Icon(
                                            iconData,
                                            modifier =
                                                Modifier.size(MenuDefaults.TrailingIconSize),
                                            contentDescription = null,
                                        )
                                    }
                                }
                            },
                        checked = checked[groupIndex][itemIndex],
                        onCheckedChange = { checked[groupIndex][itemIndex] = it },
                    )
                }
            }

            if (groupIndex != groupCount - 1) {
                Spacer(Modifier.height(MenuDefaults.GroupSpacing))
            }
        }
        if (checked.last().last()) {
            DropdownMenuButtonGroup()
        }
    }
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this menu item is currently checked. |
| `onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this menu item is clicked, with the new checked state. |
| `text: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | text of the menu item. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuItemShapes` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuItemShapes` that will be used to resolve the shapes for this menu item. The shape of this item is determined by the value of `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#CheckableDropdownMenuItem(kotlin.Boolean,kotlin.Function1,kotlin.Function0,androidx.compose.material3.MenuItemShapes,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SelectableMenuItemColors,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource)`. 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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuDefaults#itemShape(kotlin.Int,kotlin.Int)` |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this menu item. |
| `leadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional leading icon to be displayed when the item is unchecked. |
| `checkedLeadingIcon: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional leading icon to be displayed when the item is checked. |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional trailing content to be displayed at the end of the item's text. |
| `supportingText: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | optional supporting text of the menu item. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this menu item. When `false`, this component will not respond to user input. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableMenuItemColors = MenuDefaults.selectableItemColors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableMenuItemColors` that will be used to resolve the colors for this menu item. There are two predefined `https://developer.android.com/reference/kotlin/androidx/compose/material3/SelectableMenuItemColors` at `https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuDefaults#selectableItemColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` and `https://developer.android.com/reference/kotlin/androidx/compose/material3/MenuDefaults#selectableItemVibrantColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)` which you can use or modify. |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = MenuDefaults.DropdownMenuItemHorizontalArrangement` | the horizontal arrangement of the menu item's children. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = MenuDefaults.DropdownMenuSelectableItemContentPadding` | the padding applied to the content of this menu item. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this menu item. |