---
title: "ListItem"
description: "Lists are continuous, vertical indexes of text or images."
type: "component"
---

<div class='type'>Composable Component</div>



Lists are continuous, vertical indexes of text or images.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
fun ListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable BoxScope.() -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    tonalElevation: Dp = ListItemDefaults.TonalElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
)
```


#### Parameters

| | |
| --- | --- |
| selected | defines whether this ListItem is selected or not |
| onClick | called when this ListItem is clicked |
| headlineContent | the `Composable` headline content of the list item |
| modifier | `Modifier` to be applied to the list item |
| enabled | 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. |
| onLongClick | called when this ListItem is long clicked (long-pressed). |
| leadingContent | the `Composable` leading content of the list item |
| overlineContent | the `Composable` content displayed above the headline content |
| supportingContent | the `Composable` content displayed below the headline content |
| trailingContent | the `Composable` trailing meta text, icon, switch or checkbox |
| tonalElevation | the tonal elevation of this list item |
| shape | `ListItemShape` defines the shape of ListItem's container in different interaction states. See `ListItemDefaults.shape`. |
| colors | `ListItemColors` defines the background and content colors used in the list item for different interaction states. See `ListItemDefaults.colors` |
| scale | `ListItemScale` defines the size of the list item relative to its original size in different interaction states. See `ListItemDefaults.scale` |
| border | `ListItemBorder` defines a border around the list item in different interaction states. See `ListItemDefaults.border` |
| glow | `ListItemGlow` defines a shadow to be shown behind the list item for different interaction states. See `ListItemDefaults.glow` |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `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. |