RadioButton

Functions summary

Unit

@Composable RadioButton(     selected: Boolean,     modifier: Modifier,     colors: RadioButtonColors,     enabled: Boolean,     onClick: (() -> Unit)?,     interactionSource: MutableInteractionSource? ) RadioButton provides an animated radio button for use as a toggle control in ToggleChip or SplitToggleChip.

Functions

RadioButton

Artifact: androidx.wear.compose:compose-material

View Source

Added in 1.1.0

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

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

Example of a ToggleChip with RadioButton toggle control:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.SelectableChip
import androidx.wear.compose.material.Text

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,
    )
}

Parameters
selected: Boolean	Boolean flag indicating whether this radio button is currently toggled on.
modifier: Modifier = Modifier	Modifier to be applied to the radio button. This can be used to provide a content description for accessibility.
colors: RadioButtonColors = RadioButtonDefaults.colors()	ToggleChipColors from which the toggleControlColors will be obtained.
enabled: Boolean = true	Boolean flag indicating the enabled state of the RadioButton (affects the color).
onClick: (() -> Unit)? = null	Callback 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).
interactionSource: MutableInteractionSource? = null	When also providing onClick, an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.