# ListItem

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 [ListItem](https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ListItemColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp))( headlineContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, leadingContent: (@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)?, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors, tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp )` **This function is deprecated.** Use the overload where \`headlineContent\` is now a trailing \`content\` lambda | Cmn |
| `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/ListItem.composable#ListItem(androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, leadingContent: (@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)?, overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design standard list item](https://m3.material.io/components/lists/overview) | Cmn |
| `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/ListItem.composable#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, leadingContent: (@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)?, overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design standard list item](https://m3.material.io/components/lists/overview) | Cmn |
| `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/ListItem.composable#ListItem(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( 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, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, leadingContent: (@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)?, overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design standard list item](https://m3.material.io/components/lists/overview) | Cmn |
| `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/ListItem.composable#ListItem(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, leadingContent: (@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)?, overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors, elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design standard list item](https://m3.material.io/components/lists/overview) | Cmn |

## Functions

### ListItem

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/ListItem.kt+function:ListItem)

```
@Composable
fun [ListItem](https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ListItemColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp))(
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    colors: ListItemColors = ListItemDefaults.colors(),
    tonalElevation: Dp = ListItemDefaults.Elevation,
    shadowElevation: Dp = ListItemDefaults.Elevation
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> Use the overload where \`headlineContent\` is now a trailing \`content\` lambda, use this instead:
>
> ```kotlin
> ListItem(
>     modifier = modifier,
>     leadingContent = leadingContent,
>     trailingContent = trailingContent,
>     overlineContent = overlineContent,
>     supportingContent = supportingContent,
>     colors = colors,
>     elevation = ListItemDefaults.elevation(shadowElevation),
>     content = headlineContent,
> )
> ```

[Material Design list item](https://m3.material.io/components/lists/overview)

Lists are continuous, vertical indexes of text or images.

This overload of list item uses the baseline (legacy) specifications for the component. For an updated component, use the overload with renamed parameters and a trailing content lambda. Also see other overloads for handling general click actions, single-selection, or multi-selection.

![Lists
image](https://developer.android.com/images/reference/androidx/compose/material3/lists.png)

This component can be used to achieve the list item templates existing in the spec. One-line list items have a singular line of headline content. Two-line list items additionally have either supporting or overline content. Three-line list items have either both supporting and overline content, or extended (two-line) supporting text.

| Parameters |
|---|---|
| `headlineContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the headline content of the list item |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to the list item |
| `overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed above the headline content |
| `supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the supporting content of the list item |
| `leadingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the leading content of the list item |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the trailing meta text, icon, switch or checkbox |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors = ListItemDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors` that will be used to resolve the background and content color for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#colors()` |
| `tonalElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ListItemDefaults.Elevation` | the tonal elevation of this list item |
| `shadowElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ListItemDefaults.Elevation` | the shadow elevation of this list item |

### ListItem

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/ListItem.kt+function:ListItem)

```
@Composable
fun ListItem(
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    shapes: ListItemShapes = ListItemDefaults.shapes(),
    colors: ListItemColors = ListItemDefaults.colors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    content: @Composable () -> Unit
): Unit
```

[Material Design standard list item](https://m3.material.io/components/lists/overview)

Lists are continuous, vertical indexes of text or images.

This overload of `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)` does not handle any interaction events. See other overloads for handling general click actions, single-selection, or multi-selection interactions.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    ListItem(
        leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        content = { Text("One line list item") },
    )

    HorizontalDivider()

    ListItem(
        leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        supportingContent = { Text("Supporting text") },
        content = { Text("Two line list item") },
    )

    HorizontalDivider()

    ListItem(
        leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        overlineContent = { Text("Overline text") },
        supportingContent = { Text("Supporting text") },
        content = { Text("Three line list item") },
    )

    HorizontalDivider()

    ListItem(
        leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        supportingContent = { Text("Supporting text\nthat is multiple lines") },
        content = { Text("Another three line list item") },
    )

    HorizontalDivider()
}
```

| Parameters |
|---|---|
| `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 list item. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this list item. Note that the component does not handle interactions internally. Nonetheless, when `false`, this component will appear visually disabled and disabled to accessibility services. |
| `leadingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the leading content of this list item, such as an icon or avatar. |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the trailing content of this list item, such as a checkbox, switch, or icon. |
| `overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed above the main content of the list item. |
| `supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed below the main content of the list item. |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = ListItemDefaults.verticalAlignment()` | the vertical alignment of children within the list item, after accounting for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)`. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes = ListItemDefaults.shapes()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes` that will be used to resolve the shapes used for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#shapes()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors = ListItemDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors` that will be used to resolve the colors used for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#colors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation = ListItemDefaults.elevation()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation` used to resolve the elevation for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#elevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ListItemDefaults.ContentPadding` | the padding to be applied to the content of this list item. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the main content of this list item. Also known as the headline or label. |

### ListItem

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/ListItem.kt+function:ListItem)

```
@Composable
fun ListItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    shapes: ListItemShapes = ListItemDefaults.shapes(),
    colors: ListItemColors = ListItemDefaults.colors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
```

[Material Design standard list item](https://m3.material.io/components/lists/overview)

Lists are continuous, vertical indexes of text or images.

This overload of `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` handles click events, calling its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` lambda to trigger an action. See other overloads for handling single-selection, multi-selection, or no interaction handling.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    repeat(3) { idx ->
        var count by rememberSaveable { mutableIntStateOf(0) }
        ListItem(
            onClick = { count++ },
            leadingContent = { Icon(Icons.Default.Home, contentDescription = null) },
            trailingContent = { Text("$count") },
            supportingContent = { Text("Additional info") },
            content = { Text("Item ${idx + 1}") },
        )

        HorizontalDivider()
    }
}
```

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    repeat(3) { idx ->
        ListItem(
            onClick = { /* ListItem onClick callback */ },
            leadingContent = { Icon(Icons.Default.Home, contentDescription = null) },
            trailingContent = {
                IconButton(onClick = { /* Child onClick callback */ }) {
                    Icon(Icons.Default.Favorite, contentDescription = "Localized description")
                }
            },
            supportingContent = { Text("The trailing icon has a separate click action") },
            content = { Text("Item ${idx + 1}") },
        )

        HorizontalDivider()
    }
}
```

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Checkbox
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    var inClickMode by rememberSaveable { mutableStateOf(true) }
    val counts = rememberSaveable { mutableStateListOf(0, 0, 0) }
    val checked = rememberSaveable { mutableStateListOf(false, false, false) }

    repeat(3) { idx ->
        if (inClickMode) {
            ListItem(
                onClick = { counts[idx]++ },
                onLongClick = {
                    checked[idx] = true
                    inClickMode = false
                },
                leadingContent = { Icon(Icons.Default.Home, contentDescription = null) },
                trailingContent = { Text("${counts[idx]}") },
                supportingContent = { Text("Long-click to change interaction mode.") },
                content = { Text("Item ${idx + 1}") },
            )
        } else {
            ListItem(
                checked = checked[idx],
                onCheckedChange = { checked[idx] = it },
                onLongClick = {
                    inClickMode = true
                    checked.clear()
                    checked.addAll(listOf(false, false, false))
                },
                leadingContent = { Checkbox(checked = checked[idx], onCheckedChange = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Long-click to change interaction mode.") },
                content = { Text("Item ${idx + 1}") },
            )
        }

        HorizontalDivider()
    }
}
```

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this list item is clicked. |
| `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 list item. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this list item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `leadingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the leading content of this list item, such as an icon or avatar. |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the trailing content of this list item, such as a checkbox, switch, or icon. |
| `overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed above the main content of the list item. |
| `supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed below the main content of the list item. |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = ListItemDefaults.verticalAlignment()` | the vertical alignment of children within the list item, after accounting for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | called when this list item is long clicked (long-pressed). |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes = ListItemDefaults.shapes()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes` that this list item will use to morph between depending on the user's interaction with the list item. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#shapes()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors = ListItemDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors` that will be used to resolve the colors used for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#colors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation = ListItemDefaults.elevation()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation` used to resolve the elevation for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#elevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ListItemDefaults.ContentPadding` | the padding to be applied to the content of this list 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 list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the main content of this list item. Also known as the headline or label. |

### ListItem

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/ListItem.kt+function:ListItem)

```
@Composable
fun ListItem(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    shapes: ListItemShapes = ListItemDefaults.shapes(),
    colors: ListItemColors = ListItemDefaults.colors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
```

[Material Design standard list item](https://m3.material.io/components/lists/overview)

Lists are continuous, vertical indexes of text or images.

This overload of `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` represents a multi-selection (toggleable) item, analogous to a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Checkbox.composable#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)`. See other overloads for handling general click actions, single-selection, or no interaction handling.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Checkbox
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    repeat(3) { idx ->
        var checked by rememberSaveable { mutableStateOf(false) }
        ListItem(
            checked = checked,
            onCheckedChange = { checked = it },
            leadingContent = { Checkbox(checked = checked, onCheckedChange = null) },
            trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            supportingContent = { Text("Additional info") },
            content = { Text("Item ${idx + 1}") },
        )

        HorizontalDivider()
    }
}
```

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Checkbox
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    HorizontalDivider()

    var inClickMode by rememberSaveable { mutableStateOf(true) }
    val counts = rememberSaveable { mutableStateListOf(0, 0, 0) }
    val checked = rememberSaveable { mutableStateListOf(false, false, false) }

    repeat(3) { idx ->
        if (inClickMode) {
            ListItem(
                onClick = { counts[idx]++ },
                onLongClick = {
                    checked[idx] = true
                    inClickMode = false
                },
                leadingContent = { Icon(Icons.Default.Home, contentDescription = null) },
                trailingContent = { Text("${counts[idx]}") },
                supportingContent = { Text("Long-click to change interaction mode.") },
                content = { Text("Item ${idx + 1}") },
            )
        } else {
            ListItem(
                checked = checked[idx],
                onCheckedChange = { checked[idx] = it },
                onLongClick = {
                    inClickMode = true
                    checked.clear()
                    checked.addAll(listOf(false, false, false))
                },
                leadingContent = { Checkbox(checked = checked[idx], onCheckedChange = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Long-click to change interaction mode.") },
                content = { Text("Item ${idx + 1}") },
            )
        }

        HorizontalDivider()
    }
}
```

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether this list item is toggled on or off. |
| `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 toggleable list item is clicked. |
| `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 list item. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this list item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `leadingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the leading content of this list item, such as an icon or avatar. |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the trailing content of this list item, such as a checkbox, switch, or icon. |
| `overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed above the main content of the list item. |
| `supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed below the main content of the list item. |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = ListItemDefaults.verticalAlignment()` | the vertical alignment of children within the list item, after accounting for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | called when this list item is long clicked (long-pressed). |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes = ListItemDefaults.shapes()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes` that this list item will use to morph between depending on the user's interaction with the list item. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#shapes()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors = ListItemDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors` that will be used to resolve the colors used for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#colors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation = ListItemDefaults.elevation()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation` used to resolve the elevation for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#elevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ListItemDefaults.ContentPadding` | the padding to be applied to the content of this list 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 list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the main content of this list item. Also known as the headline or label. |

### ListItem

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/ListItem.kt+function:ListItem)

```
@Composable
fun ListItem(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    shapes: ListItemShapes = ListItemDefaults.shapes(),
    colors: ListItemColors = ListItemDefaults.colors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit
```

[Material Design standard list item](https://m3.material.io/components/lists/overview)

Lists are continuous, vertical indexes of text or images.

This overload of `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItem.composable#ListItem(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` represents a single-selection item, analogous to a `https://developer.android.com/reference/kotlin/androidx/compose/material3/RadioButton.composable#RadioButton(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.RadioButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource)`. See other overloads for handling general click actions, multi-selection, or no interaction handling.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

Column(modifier = Modifier.verticalScroll(rememberScrollState()).selectableGroup()) {
    HorizontalDivider()

    var selectedIndex: Int? by rememberSaveable { mutableStateOf(null) }
    repeat(3) { idx ->
        val selected = selectedIndex == idx
        ListItem(
            selected = selected,
            onClick = { selectedIndex = if (selected) null else idx },
            leadingContent = { RadioButton(selected = selected, onClick = null) },
            trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            supportingContent = { Text("Additional info") },
            content = { Text("Item ${idx + 1}") },
        )

        HorizontalDivider()
    }
}
```

| Parameters |
|---|---|
| `selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this list item is selected. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | called when this list item is clicked. |
| `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 list item. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this list item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `leadingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the leading content of this list item, such as an icon or avatar. |
| `trailingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the trailing content of this list item, such as a checkbox, switch, or icon. |
| `overlineContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed above the main content of the list item. |
| `supportingContent: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the content displayed below the main content of the list item. |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = ListItemDefaults.verticalAlignment()` | the vertical alignment of children within the list item, after accounting for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`. |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | called when this list item is long clicked (long-pressed). |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Alignment.Vertical,kotlin.Function0,kotlin.String,androidx.compose.material3.ListItemShapes,androidx.compose.material3.ListItemColors,androidx.compose.material3.ListItemElevation,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` action. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes = ListItemDefaults.shapes()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemShapes` that this list item will use to morph between depending on the user's interaction with the list item. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#shapes()`. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors = ListItemDefaults.colors()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemColors` that will be used to resolve the colors used for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#colors()`. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation = ListItemDefaults.elevation()` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemElevation` used to resolve the elevation for this list item in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/ListItemDefaults#elevation(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ListItemDefaults.ContentPadding` | the padding to be applied to the content of this list 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 list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the main content of this list item. Also known as the headline or label. |