Composable Component

RadioButton

The Wear Material RadioButton offers slots and a specific layout for an icon, a label and a secondaryLabel.

RadioButtonSample

@Preview
@Composable
fun RadioButtonSample() {
    Column(modifier = Modifier.selectableGroup().fillMaxSize()) {
        var selectedButton by remember { mutableStateOf(0) }
        // RadioButton uses the Radio selection control by default.
        RadioButton(
            label = { Text("Radio button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            secondaryLabel = {
                Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
            },
            selected = selectedButton == 0,
            onSelect = { selectedButton = 0 },
            icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
            enabled = true,
        )
        Spacer(modifier = Modifier.height(4.dp))
        RadioButton(
            label = { Text("Radio button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            secondaryLabel = {
                Text("With secondary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
            },
            selected = selectedButton == 1,
            onSelect = { selectedButton = 1 },
            icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
            enabled = true,
        )
    }
}