---
title: "RadioButton"
description: "The Wear Material `RadioButton` offers slots and a specific layout for an icon, a label and a
secondaryLabel. The icon and secondaryLabel are optional. The items are laid out in a row with
the optional icon at the start, a column containing the two label slots in the middle and the
selection control at the end."
type: "component"
---

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



The Wear Material `RadioButton` offers slots and a specific layout for an icon, a label and a
secondaryLabel. The icon and secondaryLabel are optional. The items are laid out in a row with
the optional icon at the start, a column containing the two label slots in the middle and the
selection control at the end.

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

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


```kotlin
@Composable
public fun RadioButton(
    selected: Boolean,
    onSelect: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RadioButtonDefaults.radioButtonShape,
    colors: RadioButtonColors = RadioButtonDefaults.radioButtonColors(),
    contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    icon: @Composable (BoxScope.() -> Unit)? = null,
    secondaryLabel: @Composable (RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selected | Boolean flag indicating whether this button is currently selected. |
| onSelect | Callback to be invoked when this button has been selected by clicking. |
| modifier | Modifier to be applied to the `RadioButton`. |
| enabled | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| shape | Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. |
| colors | `RadioButtonColors` that will be used to resolve the background and content color for this button in different states. |
| contentPadding | The spacing values to apply internally between the container and the content. |
| interactionSource | 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. |
| transformation | Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background. |
| icon | An optional slot for providing an icon to indicate the purpose of the button. The contents are expected to be center-aligned, both horizontally and vertically, and should be an icon of size 24.dp. |
| secondaryLabel | A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned. |
| label | A slot for providing the button's main label. The contents are expected to be text which is "start" aligned. |






## Code Examples
### RadioButtonSample
```kotlin
@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,
        )
    }
}
```