SegmentedListItem

Functions summary

Unit
@ExperimentalMaterial3ExpressiveApi
@Composable
SegmentedListItem(
    onClick: () -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier,
    enabled: Boolean,
    leadingContent: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    overlineContent: (@Composable () -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    verticalAlignment: Alignment.Vertical,
    onLongClick: (() -> Unit)?,
    onLongClickLabel: String?,
    colors: ListItemColors,
    elevation: ListItemElevation,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design segmented list item
Cmn
Unit
@ExperimentalMaterial3ExpressiveApi
@Composable
SegmentedListItem(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier,
    enabled: Boolean,
    leadingContent: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    overlineContent: (@Composable () -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    verticalAlignment: Alignment.Vertical,
    onLongClick: (() -> Unit)?,
    onLongClickLabel: String?,
    colors: ListItemColors,
    elevation: ListItemElevation,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design segmented list item
Cmn
Unit
@ExperimentalMaterial3ExpressiveApi
@Composable
SegmentedListItem(
    selected: Boolean,
    onClick: () -> Unit,
    shapes: ListItemShapes,
    modifier: Modifier,
    enabled: Boolean,
    leadingContent: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    overlineContent: (@Composable () -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    verticalAlignment: Alignment.Vertical,
    onLongClick: (() -> Unit)?,
    onLongClickLabel: String?,
    colors: ListItemColors,
    elevation: ListItemElevation,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design segmented list item
Cmn

Functions

SegmentedListItem

Cmn 
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    onClick: () -> Unit,
    shapes: ListItemShapes,
    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,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design segmented list item

Lists are continuous, vertical indexes of text or images.

This overload of SegmentedListItem 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.animation.AnimatedVisibility
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ExpandLess
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SegmentedListItem
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
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.unit.dp

var expanded by rememberSaveable { mutableStateOf(false) }
val numChildren = 3
val itemCount = 1 + if (expanded) numChildren else 0
val childrenChecked = rememberSaveable { mutableStateListOf(*Array(numChildren) { false }) }

val colors =
    ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
) {
    Spacer(Modifier.height(100.dp))
    SegmentedListItem(
        onClick = { expanded = !expanded },
        modifier =
            Modifier.semantics { stateDescription = if (expanded) "Expanded" else "Collapsed" },
        colors = colors,
        shapes = ListItemDefaults.segmentedShapes(index = 0, count = itemCount),
        leadingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
        trailingContent = {
            Icon(
                if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                contentDescription = null,
            )
        },
        content = { Text("Click to expand/collapse") },
    )
    AnimatedVisibility(
        visible = expanded,
        enter = expandVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
        exit = shrinkVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
    ) {
        Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
            repeat(numChildren) { idx ->
                SegmentedListItem(
                    checked = childrenChecked[idx],
                    onCheckedChange = { childrenChecked[idx] = it },
                    colors = colors,
                    shapes =
                        ListItemDefaults.segmentedShapes(index = idx + 1, count = itemCount),
                    leadingContent = {
                        Icon(Icons.Default.Favorite, contentDescription = null)
                    },
                    trailingContent = {
                        Checkbox(checked = childrenChecked[idx], onCheckedChange = null)
                    },
                    content = { Text("Child ${idx + 1}") },
                )
            }
        }
    }
}
Parameters
onClick: () -> Unit

called when this list item is clicked.
shapes: ListItemShapes

the ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifier: Modifier = Modifier

the Modifier to be applied to this list item.
enabled: Boolean = true

controls the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
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 contentPadding.
onLongClick: (() -> Unit)? = null

called when this list item is long clicked (long-pressed).
onLongClickLabel: String? = null

semantic / accessibility label for the onLongClick action.
colors: ListItemColors = ListItemDefaults.segmentedColors()

the ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevation: ListItemElevation = ListItemDefaults.elevation()

the ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPadding: PaddingValues = ListItemDefaults.ContentPadding

the padding to be applied to the content of this list item.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

the main content of this list item. Also known as the headline or label.

SegmentedListItem

Cmn 
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    shapes: ListItemShapes,
    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,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design segmented list item

Lists are continuous, vertical indexes of text or images.

This overload of SegmentedListItem 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.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SegmentedListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable

val count = 4
val colors =
    ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
    repeat(count) { idx ->
        var checked by rememberSaveable { mutableStateOf(false) }
        SegmentedListItem(
            checked = checked,
            onCheckedChange = { checked = it },
            colors = colors,
            shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
            leadingContent = { Checkbox(checked = checked, onCheckedChange = null) },
            trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            supportingContent = { Text("Additional info") },
            content = { Text("Item ${idx + 1}") },
        )
    }
}
Parameters
checked: Boolean

whether this list item is toggled on or off.
onCheckedChange: (Boolean) -> Unit

called when this toggleable list item is clicked.
shapes: ListItemShapes

the ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifier: Modifier = Modifier

the Modifier to be applied to this list item.
enabled: Boolean = true

controls the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
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 contentPadding.
onLongClick: (() -> Unit)? = null

called when this list item is long clicked (long-pressed).
onLongClickLabel: String? = null

semantic / accessibility label for the onLongClick action.
colors: ListItemColors = ListItemDefaults.segmentedColors()

the ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevation: ListItemElevation = ListItemDefaults.elevation()

the ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPadding: PaddingValues = ListItemDefaults.ContentPadding

the padding to be applied to the content of this list item.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

the main content of this list item. Also known as the headline or label.

SegmentedListItem

Cmn 
@ExperimentalMaterial3ExpressiveApi
@Composable
fun SegmentedListItem(
    selected: Boolean,
    onClick: () -> Unit,
    shapes: ListItemShapes,
    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,
    colors: ListItemColors = ListItemDefaults.segmentedColors(),
    elevation: ListItemElevation = ListItemDefaults.elevation(),
    contentPadding: PaddingValues = ListItemDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design segmented list item

Lists are continuous, vertical indexes of text or images.

This overload of SegmentedListItem 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.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.SegmentedListItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier

val count = 4
val colors =
    ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
Column(
    modifier = Modifier.selectableGroup(),
    verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
) {
    var selectedIndex: Int? by rememberSaveable { mutableStateOf(null) }
    repeat(count) { idx ->
        val selected = selectedIndex == idx
        SegmentedListItem(
            selected = selected,
            onClick = { selectedIndex = if (selected) null else idx },
            colors = colors,
            shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
            leadingContent = { RadioButton(selected = selected, onClick = null) },
            trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            supportingContent = { Text("Additional info") },
            content = { Text("Item ${idx + 1}") },
        )
    }
}
Parameters
selected: Boolean

whether or not this list item is selected.
onClick: () -> Unit

called when this list item is clicked.
shapes: ListItemShapes

the ListItemShapes that this list item will use to morph between depending on the user's interaction with the list item. The base shape depends on the index of the item within the overall list. See ListItemDefaults.segmentedShapes.
modifier: Modifier = Modifier

the Modifier to be applied to this list item.
enabled: Boolean = true

controls the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
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 contentPadding.
onLongClick: (() -> Unit)? = null

called when this list item is long clicked (long-pressed).
onLongClickLabel: String? = null

semantic / accessibility label for the onLongClick action.
colors: ListItemColors = ListItemDefaults.segmentedColors()

the ListItemColors that will be used to resolve the colors used for this list item in different states. See ListItemDefaults.segmentedColors.
elevation: ListItemElevation = ListItemDefaults.elevation()

the ListItemElevation used to resolve the elevation for this list item in different states. See ListItemDefaults.elevation.
contentPadding: PaddingValues = ListItemDefaults.ContentPadding

the padding to be applied to the content of this list item.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

the main content of this list item. Also known as the headline or label.