---
title: "MultiChoiceSegmentedButtonRow"
description: "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."
type: "component"
---

<div class='type'>Composable Component</div>



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.

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


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


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this row |
| space | the dimension of the overlap between buttons. Should be equal to the stroke width used on the items. |
| content | the content of this Segmented Button Row, typically a sequence of `SegmentedButton`s |






## Code Examples
### SegmentedButtonMultiSelectSample
```kotlin
@Composable
@Preview
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)
            }
        }
    }
}
```