<h2 id="listitem-selected-onclick-headlinecontent-modifier-enabled-onlongclick-overlinecontent-supportingcontent-leadingcontent-trailingcontent-tonalelevation-shape-colors-scale-border-glow-interactionsource">ListItem</h2>

<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](/jetpack-compose/androidx.compose.runtime/runtime/classes/Composable) headline content of the list item |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.compose.runtime/runtime/classes/Composable) leading content of the list item |
| overlineContent | the [Composable](/jetpack-compose/androidx.compose.runtime/runtime/classes/Composable) content displayed above the headline content |
| supportingContent | the [Composable](/jetpack-compose/androidx.compose.runtime/runtime/classes/Composable) content displayed below the headline content |
| trailingContent | the [Composable](/jetpack-compose/androidx.compose.runtime/runtime/classes/Composable) trailing meta text, icon, switch or checkbox |
| tonalElevation | the tonal elevation of this list item |
| shape | [ListItemShape](/jetpack-compose/androidx.tv/tv-material/classes/ListItemShape) defines the shape of ListItem's container in different interaction states. See [ListItemDefaults.shape]. |
| colors | [ListItemColors](/jetpack-compose/androidx.tv/tv-material/classes/ListItemColors) defines the background and content colors used in the list item for different interaction states. See [ListItemDefaults.colors] |
| scale | [ListItemScale](/jetpack-compose/androidx.tv/tv-material/classes/ListItemScale) defines the size of the list item relative to its original size in different interaction states. See [ListItemDefaults.scale] |
| border | [ListItemBorder](/jetpack-compose/androidx.tv/tv-material/classes/ListItemBorder) defines a border around the list item in different interaction states. See [ListItemDefaults.border] |
| glow | [ListItemGlow](/jetpack-compose/androidx.tv/tv-material/classes/ListItemGlow) defines a shadow to be shown behind the list item for different interaction states. See [ListItemDefaults.glow] |
| 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 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. |