State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

ListItem

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

<a href="https://m3.material.io/components/lists/overview" class="external" target="_blank">Material Design list item.</a>

Lists are continuous, vertical indexes of text or images.

!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. For example:

  • one-line item

Overloads

ListItem

@Composable
fun ListItem(
    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,
)

Parameters

NameDescription
headlineContentthe headline content of the list item
modifierModifier to be applied to the list item
overlineContentthe content displayed above the headline content
supportingContentthe supporting content of the list item
leadingContentthe leading content of the list item
trailingContentthe trailing meta text, icon, switch or checkbox
colorsListItemColors that will be used to resolve the background and content color for this list item in different states. See ListItemDefaults.colors
tonalElevationthe tonal elevation of this list item
shadowElevationthe shadow elevation of this list ite