---
title: "RadioButton"
description: "`RadioButton` provides an animated radio button for use as a toggle control in `ToggleChip` or
`SplitToggleChip`."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


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


#### Parameters

| | |
| --- | --- |
| selected | Boolean flag indicating whether this radio button is currently toggled on. |
| modifier | Modifier 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. |
| enabled | Boolean flag indicating the enabled state of the `RadioButton` (affects the color). |
| onClick | 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 | When 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 Examples
### SelectableChipWithRadioButton
```kotlin
@Composable
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,
        )
    }
}
```