Composable Component

SplitSelectableChip

A SplitSelectableChip is a specialized type of Chip that includes a slot for a selection control, such as a radio button.

SplitSelectableChipWithRadioButton

@Composable
fun SplitSelectableChipWithRadioButton() {
    var selectedRadioIndex by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        SplitSelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 0,
            onSelectionClick = { selectedRadioIndex = 0 },
            label = {
                // The primary label should have a maximum 3 lines of text
                Text("Primary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
            },
            secondaryLabel = {
                // and the secondary label should have max 2 lines of text.
                Text("Secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
            },
            onContainerClick = {
                /* Do something */
            },
            enabled = true,
        )
        Spacer(modifier = Modifier.height(8.dp))
        SplitSelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 1,
            onSelectionClick = { selectedRadioIndex = 1 },
            label = {
                // The primary label should have a maximum 3 lines of text
                Text("Alternative label", maxLines = 3, overflow = TextOverflow.Ellipsis)
            },
            secondaryLabel = {
                // and the secondary label should have max 2 lines of text.
                Text("Alternative secondary", maxLines = 2, overflow = TextOverflow.Ellipsis)
            },
            onContainerClick = {
                /* Do something */
            },
            enabled = true,
        )
    }
}