Compose Component

SplitRadioButton

The Wear Material SplitRadioButton offers two slots and a specific layout for a label and secondaryLabel.

SplitRadioButton social preview

SplitRadioButtonSample

@Sampled
@Preview
@Composable
fun SplitRadioButtonSample() {
    Column(modifier = Modifier.selectableGroup().padding(horizontal = 10.dp)) {
        var selectedButton by remember { mutableStateOf(0) }
        // SplitRadioButton uses the Radio selection control by default.
        SplitRadioButton(
            label = { Text("First Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            selected = selectedButton == 0,
            onSelectionClick = { selectedButton = 0 },
            selectionContentDescription = "First",
            onContainerClick = { /* Do something */ },
            containerClickLabel = "click",
            modifier = Modifier.fillMaxWidth(),
            enabled = true,
        )
        Spacer(modifier = Modifier.height(4.dp))
        SplitRadioButton(
            label = { Text("Second Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            selected = selectedButton == 1,
            onSelectionClick = { selectedButton = 1 },
            selectionContentDescription = "Second",
            onContainerClick = { /* Do something */ },
            containerClickLabel = "click",
            modifier = Modifier.fillMaxWidth(),
            enabled = true,
        )
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: