New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

SingleChoiceSegmentedButtonRow

Common

A Layout to correctly position and size [SegmentedButton]s in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other. [SingleChoiceSegmentedButtonRow] is used when the selection only allows one value, for correct semantics.

Last updated:

Installation

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

Overloads

@Composable
fun SingleChoiceSegmentedButtonRow(
    modifier: Modifier = Modifier,
    space: Dp = SegmentedButtonDefaults.BorderWidth,
    content: @Composable SingleChoiceSegmentedButtonRowScope.() -> 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

SegmentedButtonSingleSelectSample

@Preview
@Composable
@Sampled
fun SegmentedButtonSingleSelectSample() {
    var selectedIndex by remember { mutableStateOf(0) }
    val options = listOf("Day", "Month", "Week")
    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex
            ) {
                Text(label)
            }
        }
    }
}