by @alexstyl
✉️ Leave your feedback

← Back to Material 3 Compose


Material 3
. Since 1.0.0



Community Notes

<a href="" class="external" target="_blank">Material Design list item.</a>

Lists are continuous, vertical indexes of text or images.

!Lists image(

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



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,


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
Previous ComponentLinearProgressIndicator
Next ComponentMaterialTheme