New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

ListItem

Common

Lists are continuous, vertical indexes of text or images.

Lists image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta04")
}

Overloads

@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
modifier[Modifier] 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
colors[ListItemColors] 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 item

Code Examples

OneLineListItem

@Composable
@Sampled
@Preview
fun OneLineListItem() {
    Column {
        ListItem(
            headlineContent = { Text("One line list item with 24x24 icon") },
            leadingContent = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Localized description",
                )
            }
        )
        HorizontalDivider()
    }
}

TwoLineListItem

@Composable
@Sampled
@Preview
fun TwoLineListItem() {
    Column {
        ListItem(
            headlineContent = { Text("Two line list item with trailing") },
            supportingContent = { Text("Secondary text") },
            trailingContent = { Text("meta") },
            leadingContent = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Localized description",
                )
            }
        )
        HorizontalDivider()
    }
}

ThreeLineListItemWithOverlineAndSupporting

@Composable
@Sampled
@Preview
fun ThreeLineListItemWithOverlineAndSupporting() {
    Column {
        ListItem(
            headlineContent = { Text("Three line list item") },
            overlineContent = { Text("OVERLINE") },
            supportingContent = { Text("Secondary text") },
            leadingContent = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Localized description",
                )
            },
            trailingContent = { Text("meta") }
        )
        HorizontalDivider()
    }
}

ThreeLineListItemWithExtendedSupporting

@Composable
@Sampled
@Preview
fun ThreeLineListItemWithExtendedSupporting() {
    Column {
        ListItem(
            headlineContent = { Text("Three line list item") },
            supportingContent = {
                Text("Secondary text that is long and perhaps goes onto another line")
            },
            leadingContent = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Localized description",
                )
            },
            trailingContent = { Text("meta") }
        )
        HorizontalDivider()
    }
}