New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

MultiChoiceSegmentedButtonRow

Common

A Layout to correctly position, size, and add semantics to [SegmentedButton]s in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other.

[MultiChoiceSegmentedButtonRow] is used when the selection allows multiple value, for correct semantics.

Last updated:

Installation

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

Overloads

@Composable
fun MultiChoiceSegmentedButtonRow(
    modifier: Modifier = Modifier,
    space: Dp = SegmentedButtonDefaults.BorderWidth,
    content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit
)

Parameters

namedescription
modifierthe [Modifier] to be applied to this row
spacethe dimension of the overlap between buttons. Should be equal to the stroke width used on the items.
contentthe content of this Segmented Button Row, typically a sequence of [SegmentedButton]s

Code Example

SegmentedButtonMultiSelectSample

@Preview
@Composable
@Sampled
fun SegmentedButtonMultiSelectSample() {
    val checkedList = remember { mutableStateListOf<Int>() }
    val options = listOf("Favorites", "Trending", "Saved")
    val icons =
        listOf(
            Icons.Filled.StarBorder,
            Icons.AutoMirrored.Filled.TrendingUp,
            Icons.Filled.BookmarkBorder
        )
    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
                icon = {
                    SegmentedButtonDefaults.Icon(active = index in checkedList) {
                        Icon(
                            imageVector = icons[index],
                            contentDescription = null,
                            modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                        )
                    }
                },
                onCheckedChange = {
                    if (index in checkedList) {
                        checkedList.remove(index)
                    } else {
                        checkedList.add(index)
                    }
                },
                checked = index in checkedList
            ) {
                Text(label)
            }
        }
    }
}