ListItem
Functions summary
Unit |
@ComposableThis function is deprecated. Use the overload where `headlineContent` is now a trailing `content` lambda |
Cmn
|
Unit |
@Composable |
Cmn
|
Unit |
@Composable |
Cmn
|
Unit |
@Composable |
Cmn
|
Unit |
@Composable |
Cmn
|
Functions
ListItem
@Composable
funListItem(
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
): Unit
Lists are continuous, vertical indexes of text or images.
This overload of list item uses the baseline (legacy) specifications for the component. For an updated component, use the overload with renamed parameters and a trailing content lambda. Also see other overloads for handling general click actions, single-selection, or multi-selection.

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.
| Parameters | |
|---|---|
headlineContent: @Composable () -> Unit |
the headline content of the list item |
modifier: Modifier = Modifier |
|
overlineContent: (@Composable () -> Unit)? = null |
the content displayed above the headline content |
supportingContent: (@Composable () -> Unit)? = null |
the supporting content of the list item |
leadingContent: (@Composable () -> Unit)? = null |
the leading content of the list item |
trailingContent: (@Composable () -> Unit)? = null |
the trailing meta text, icon, switch or checkbox |
colors: ListItemColors = ListItemDefaults.colors() |
|
tonalElevation: Dp = ListItemDefaults.Elevation |
the tonal elevation of this list item |
shadowElevation: Dp = ListItemDefaults.Elevation |
the shadow elevation of this list item |
ListItem
@Composable
fun ListItem(
modifier: Modifier = Modifier,
enabled: Boolean = true,
leadingContent: (@Composable () -> Unit)? = null,
trailingContent: (@Composable () -> Unit)? = null,
overlineContent: (@Composable () -> Unit)? = null,
supportingContent: (@Composable () -> Unit)? = null,
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
shapes: ListItemShapes = ListItemDefaults.shapes(),
colors: ListItemColors = ListItemDefaults.colors(),
elevation: ListItemElevation = ListItemDefaults.elevation(),
contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
content: @Composable () -> Unit
): Unit
Material Design standard list item
Lists are continuous, vertical indexes of text or images.
This overload of ListItem does not handle any interaction events. See other overloads for handling general click actions, single-selection, or multi-selection interactions.
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() ListItem( leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) }, content = { Text("One line list item") }, ) HorizontalDivider() ListItem( leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) }, supportingContent = { Text("Supporting text") }, content = { Text("Two line list item") }, ) HorizontalDivider() ListItem( leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) }, overlineContent = { Text("Overline text") }, supportingContent = { Text("Supporting text") }, content = { Text("Three line list item") }, ) HorizontalDivider() ListItem( leadingContent = { Icon(Icons.Filled.Favorite, contentDescription = null) }, supportingContent = { Text("Supporting text\nthat is multiple lines") }, content = { Text("Another three line list item") }, ) HorizontalDivider() }
| Parameters | |
|---|---|
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
controls the enabled state of this list item. Note that the component does not handle interactions internally. Nonetheless, when |
leadingContent: (@Composable () -> Unit)? = null |
the leading content of this list item, such as an icon or avatar. |
trailingContent: (@Composable () -> Unit)? = null |
the trailing content of this list item, such as a checkbox, switch, or icon. |
overlineContent: (@Composable () -> Unit)? = null |
the content displayed above the main content of the list item. |
supportingContent: (@Composable () -> Unit)? = null |
the content displayed below the main content of the list item. |
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment() |
the vertical alignment of children within the list item, after accounting for |
shapes: ListItemShapes = ListItemDefaults.shapes() |
the |
colors: ListItemColors = ListItemDefaults.colors() |
the |
elevation: ListItemElevation = ListItemDefaults.elevation() |
the |
contentPadding: PaddingValues = ListItemDefaults.ContentPadding |
the padding to be applied to the content of this list item. |
content: @Composable () -> Unit |
the main content of this list item. Also known as the headline or label. |
ListItem
@Composable
fun ListItem(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
leadingContent: (@Composable () -> Unit)? = null,
trailingContent: (@Composable () -> Unit)? = null,
overlineContent: (@Composable () -> Unit)? = null,
supportingContent: (@Composable () -> Unit)? = null,
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
onLongClick: (() -> Unit)? = null,
onLongClickLabel: String? = null,
shapes: ListItemShapes = ListItemDefaults.shapes(),
colors: ListItemColors = ListItemDefaults.colors(),
elevation: ListItemElevation = ListItemDefaults.elevation(),
contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
interactionSource: MutableInteractionSource? = null,
content: @Composable () -> Unit
): Unit
Material Design standard list item
Lists are continuous, vertical indexes of text or images.
This overload of ListItem handles click events, calling its onClick lambda to trigger an action. See other overloads for handling single-selection, multi-selection, or no interaction handling.
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Home import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() repeat(3) { idx -> var count by rememberSaveable { mutableIntStateOf(0) } ListItem( onClick = { count++ }, leadingContent = { Icon(Icons.Default.Home, contentDescription = null) }, trailingContent = { Text("$count") }, supportingContent = { Text("Additional info") }, content = { Text("Item ${idx + 1}") }, ) HorizontalDivider() } }
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Home import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() repeat(3) { idx -> ListItem( onClick = { /* ListItem onClick callback */ }, leadingContent = { Icon(Icons.Default.Home, contentDescription = null) }, trailingContent = { IconButton(onClick = { /* Child onClick callback */ }) { Icon(Icons.Default.Favorite, contentDescription = "Localized description") } }, supportingContent = { Text("The trailing icon has a separate click action") }, content = { Text("Item ${idx + 1}") }, ) HorizontalDivider() } }
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Home import androidx.compose.material3.Checkbox import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() var inClickMode by rememberSaveable { mutableStateOf(true) } val counts = rememberSaveable { mutableStateListOf(0, 0, 0) } val checked = rememberSaveable { mutableStateListOf(false, false, false) } repeat(3) { idx -> if (inClickMode) { ListItem( onClick = { counts[idx]++ }, onLongClick = { checked[idx] = true inClickMode = false }, leadingContent = { Icon(Icons.Default.Home, contentDescription = null) }, trailingContent = { Text("${counts[idx]}") }, supportingContent = { Text("Long-click to change interaction mode.") }, content = { Text("Item ${idx + 1}") }, ) } else { ListItem( checked = checked[idx], onCheckedChange = { checked[idx] = it }, onLongClick = { inClickMode = true checked.clear() checked.addAll(listOf(false, false, false)) }, leadingContent = { Checkbox(checked = checked[idx], onCheckedChange = null) }, trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) }, supportingContent = { Text("Long-click to change interaction mode.") }, content = { Text("Item ${idx + 1}") }, ) } HorizontalDivider() } }
| Parameters | |
|---|---|
onClick: () -> Unit |
called when this list item is clicked. |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
controls the enabled state of this list item. When |
leadingContent: (@Composable () -> Unit)? = null |
the leading content of this list item, such as an icon or avatar. |
trailingContent: (@Composable () -> Unit)? = null |
the trailing content of this list item, such as a checkbox, switch, or icon. |
overlineContent: (@Composable () -> Unit)? = null |
the content displayed above the main content of the list item. |
supportingContent: (@Composable () -> Unit)? = null |
the content displayed below the main content of the list item. |
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment() |
the vertical alignment of children within the list item, after accounting for |
onLongClick: (() -> Unit)? = null |
called when this list item is long clicked (long-pressed). |
onLongClickLabel: String? = null |
semantic / accessibility label for the |
shapes: ListItemShapes = ListItemDefaults.shapes() |
the |
colors: ListItemColors = ListItemDefaults.colors() |
the |
elevation: ListItemElevation = ListItemDefaults.elevation() |
the |
contentPadding: PaddingValues = ListItemDefaults.ContentPadding |
the padding to be applied to the content of this list item. |
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
content: @Composable () -> Unit |
the main content of this list item. Also known as the headline or label. |
ListItem
@Composable
fun ListItem(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
leadingContent: (@Composable () -> Unit)? = null,
trailingContent: (@Composable () -> Unit)? = null,
overlineContent: (@Composable () -> Unit)? = null,
supportingContent: (@Composable () -> Unit)? = null,
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
onLongClick: (() -> Unit)? = null,
onLongClickLabel: String? = null,
shapes: ListItemShapes = ListItemDefaults.shapes(),
colors: ListItemColors = ListItemDefaults.colors(),
elevation: ListItemElevation = ListItemDefaults.elevation(),
contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
interactionSource: MutableInteractionSource? = null,
content: @Composable () -> Unit
): Unit
Material Design standard list item
Lists are continuous, vertical indexes of text or images.
This overload of ListItem represents a multi-selection (toggleable) item, analogous to a Checkbox. See other overloads for handling general click actions, single-selection, or no interaction handling.
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material3.Checkbox import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() repeat(3) { idx -> var checked by rememberSaveable { mutableStateOf(false) } ListItem( checked = checked, onCheckedChange = { checked = it }, leadingContent = { Checkbox(checked = checked, onCheckedChange = null) }, trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) }, supportingContent = { Text("Additional info") }, content = { Text("Item ${idx + 1}") }, ) HorizontalDivider() } }
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Home import androidx.compose.material3.Checkbox import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.Text import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState())) { HorizontalDivider() var inClickMode by rememberSaveable { mutableStateOf(true) } val counts = rememberSaveable { mutableStateListOf(0, 0, 0) } val checked = rememberSaveable { mutableStateListOf(false, false, false) } repeat(3) { idx -> if (inClickMode) { ListItem( onClick = { counts[idx]++ }, onLongClick = { checked[idx] = true inClickMode = false }, leadingContent = { Icon(Icons.Default.Home, contentDescription = null) }, trailingContent = { Text("${counts[idx]}") }, supportingContent = { Text("Long-click to change interaction mode.") }, content = { Text("Item ${idx + 1}") }, ) } else { ListItem( checked = checked[idx], onCheckedChange = { checked[idx] = it }, onLongClick = { inClickMode = true checked.clear() checked.addAll(listOf(false, false, false)) }, leadingContent = { Checkbox(checked = checked[idx], onCheckedChange = null) }, trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) }, supportingContent = { Text("Long-click to change interaction mode.") }, content = { Text("Item ${idx + 1}") }, ) } HorizontalDivider() } }
| Parameters | |
|---|---|
checked: Boolean |
whether this list item is toggled on or off. |
onCheckedChange: (Boolean) -> Unit |
called when this toggleable list item is clicked. |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
controls the enabled state of this list item. When |
leadingContent: (@Composable () -> Unit)? = null |
the leading content of this list item, such as an icon or avatar. |
trailingContent: (@Composable () -> Unit)? = null |
the trailing content of this list item, such as a checkbox, switch, or icon. |
overlineContent: (@Composable () -> Unit)? = null |
the content displayed above the main content of the list item. |
supportingContent: (@Composable () -> Unit)? = null |
the content displayed below the main content of the list item. |
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment() |
the vertical alignment of children within the list item, after accounting for |
onLongClick: (() -> Unit)? = null |
called when this list item is long clicked (long-pressed). |
onLongClickLabel: String? = null |
semantic / accessibility label for the |
shapes: ListItemShapes = ListItemDefaults.shapes() |
the |
colors: ListItemColors = ListItemDefaults.colors() |
the |
elevation: ListItemElevation = ListItemDefaults.elevation() |
the |
contentPadding: PaddingValues = ListItemDefaults.ContentPadding |
the padding to be applied to the content of this list item. |
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
content: @Composable () -> Unit |
the main content of this list item. Also known as the headline or label. |
ListItem
@Composable
fun ListItem(
selected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
leadingContent: (@Composable () -> Unit)? = null,
trailingContent: (@Composable () -> Unit)? = null,
overlineContent: (@Composable () -> Unit)? = null,
supportingContent: (@Composable () -> Unit)? = null,
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment(),
onLongClick: (() -> Unit)? = null,
onLongClickLabel: String? = null,
shapes: ListItemShapes = ListItemDefaults.shapes(),
colors: ListItemColors = ListItemDefaults.colors(),
elevation: ListItemElevation = ListItemDefaults.elevation(),
contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
interactionSource: MutableInteractionSource? = null,
content: @Composable () -> Unit
): Unit
Material Design standard list item
Lists are continuous, vertical indexes of text or images.
This overload of ListItem represents a single-selection item, analogous to a RadioButton. See other overloads for handling general click actions, multi-selection, or no interaction handling.
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.selection.selectableGroup import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.ListItem import androidx.compose.material3.RadioButton import androidx.compose.material3.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier Column(modifier = Modifier.verticalScroll(rememberScrollState()).selectableGroup()) { HorizontalDivider() var selectedIndex: Int? by rememberSaveable { mutableStateOf(null) } repeat(3) { idx -> val selected = selectedIndex == idx ListItem( selected = selected, onClick = { selectedIndex = if (selected) null else idx }, leadingContent = { RadioButton(selected = selected, onClick = null) }, trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) }, supportingContent = { Text("Additional info") }, content = { Text("Item ${idx + 1}") }, ) HorizontalDivider() } }
| Parameters | |
|---|---|
selected: Boolean |
whether or not this list item is selected. |
onClick: () -> Unit |
called when this list item is clicked. |
modifier: Modifier = Modifier |
the |
enabled: Boolean = true |
controls the enabled state of this list item. When |
leadingContent: (@Composable () -> Unit)? = null |
the leading content of this list item, such as an icon or avatar. |
trailingContent: (@Composable () -> Unit)? = null |
the trailing content of this list item, such as a checkbox, switch, or icon. |
overlineContent: (@Composable () -> Unit)? = null |
the content displayed above the main content of the list item. |
supportingContent: (@Composable () -> Unit)? = null |
the content displayed below the main content of the list item. |
verticalAlignment: Alignment.Vertical = ListItemDefaults.verticalAlignment() |
the vertical alignment of children within the list item, after accounting for |
onLongClick: (() -> Unit)? = null |
called when this list item is long clicked (long-pressed). |
onLongClickLabel: String? = null |
semantic / accessibility label for the |
shapes: ListItemShapes = ListItemDefaults.shapes() |
the |
colors: ListItemColors = ListItemDefaults.colors() |
the |
elevation: ListItemElevation = ListItemDefaults.elevation() |
the |
contentPadding: PaddingValues = ListItemDefaults.ContentPadding |
the padding to be applied to the content of this list item. |
interactionSource: MutableInteractionSource? = null |
an optional hoisted |
content: @Composable () -> Unit |
the main content of this list item. Also known as the headline or label. |