New Compose Multiplatform components arrived on Composables UICheck it out →

RadioButton

[RadioButton] provides an animated radio button for use as a toggle control in [ToggleChip] or [SplitToggleChip].

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
fun RadioButton(
    selected: Boolean,
    modifier: Modifier = Modifier,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    enabled: Boolean = true,
    onClick: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null,
)

Parameters

namedescription
selectedBoolean flag indicating whether this radio button is currently toggled on.
modifierModifier to be applied to the radio button. This can be used to provide a content description for accessibility.
colors[ToggleChipColors] from which the toggleControlColors will be obtained.
enabledBoolean flag indicating the enabled state of the [RadioButton] (affects the color).
onClickCallback to be invoked when RadioButton is clicked. If null, then this is passive and relies entirely on a higher-level component to control the state (such as [ToggleChip] or [SplitToggleChip]).
interactionSourceWhen also providing [onClick], an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this radio button. You can use this to change the radio button's appearance or preview the radio button in different states. Note that if null is provided, interactions will still happen internally.

Code Example

SelectableChipWithRadioButton

@Composable
@Sampled
fun SelectableChipWithRadioButton() {
    var selectedRadioIndex by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        SelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 0,
            onClick = { 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)
            },
            appIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
                )
            },
            enabled = true,
        )
        Spacer(modifier = Modifier.height(8.dp))
        SelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 1,
            onClick = { 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)
            },
            appIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
                )
            },
            enabled = true,
        )
    }
}