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

← Back to Material Compose

ListItem

Component
in
Material
. Since 0.1.0-dev15

Overview

Code Examples

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

Lists are continuous, vertical indexes of text or images.

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

To make this ListItem clickable, use Modifier.clickable. To add a background to the ListItem, wrap it with a Surface.

This component can be used to achieve the list item templates existing in the spec. For example:

  • one-line items

Overloads

ListItem

@Composable
@ExperimentalMaterialApi
fun ListItem(
    modifier: Modifier = Modifier,
    icon: @Composable (() -> Unit)? = null,
    secondaryText: @Composable (() -> Unit)? = null,
    singleLineSecondaryText: Boolean = true,
    overlineText: @Composable (() -> Unit)? = null,
    trailing: @Composable (() -> Unit)? = null,
    text: @Composable () -> Unit
)

Parameters

NameDescription
modifierModifier to be applied to the list item
iconThe leading supporting visual of the list item
secondaryTextThe secondary text of the list item
singleLineSecondaryTextWhether the secondary text is single line
overlineTextThe text displayed above the primary text
trailingThe trailing meta text, icon, switch or checkbox
textThe primary text of the list ite