---
title: "SplitRadioButton"
description: "The Wear Material `SplitRadioButton` offers two slots and a specific layout for a label and
secondaryLabel. The secondaryLabel is optional. The items are laid out with a column containing
the two label slots and radio button control at the end."
type: "component"
---

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



The Wear Material `SplitRadioButton` offers two slots and a specific layout for a label and
secondaryLabel. The secondaryLabel is optional. The items are laid out with a column containing
the two label slots and radio button control at the end.

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

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


```kotlin
@Composable
public fun SplitRadioButton(
    selected: Boolean,
    onSelectionClick: () -> Unit,
    selectionContentDescription: String?,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RadioButtonDefaults.splitRadioButtonShape,
    colors: SplitRadioButtonColors = RadioButtonDefaults.splitRadioButtonColors(),
    selectionInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    containerClickLabel: String? = null,
    contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding,
    secondaryLabel: @Composable (RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selected | Boolean flag indicating whether this button is currently selected. |
| onSelectionClick | Callback to be invoked when this button has been selected. |
| selectionContentDescription | The content description for the selection control part of the component |
| onContainerClick | Click listener called when the user clicks the main body of the button, the area containing the labels. |
| modifier | Modifier to be applied to the button. |
| 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 | `SplitRadioButtonColors` 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. |
| selectionInteractionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "selectable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| containerInteractionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "clickable" tap area. You can use this to change the button's appearance or preview the 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. |
| containerClickLabel | Optional click label on the main body of the button for accessibility. |
| secondaryLabel | A slot for providing the button's secondary label. The contents are expected to be "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
### SplitRadioButtonSample
```kotlin
@Preview
@Composable
fun SplitRadioButtonSample() {
    Column(modifier = Modifier.selectableGroup()) {
        var selectedButton by remember { mutableStateOf(0) }
        // SplitRadioButton uses the Radio selection control by default.
        SplitRadioButton(
            label = { Text("First Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            selected = selectedButton == 0,
            onSelectionClick = { selectedButton = 0 },
            selectionContentDescription = "First",
            onContainerClick = {
                /* Do something */
            },
            containerClickLabel = "click",
            enabled = true,
        )
        Spacer(modifier = Modifier.height(4.dp))
        SplitRadioButton(
            label = { Text("Second Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
            selected = selectedButton == 1,
            onSelectionClick = { selectedButton = 1 },
            selectionContentDescription = "Second",
            onContainerClick = {
                /* Do something */
            },
            containerClickLabel = "click",
            enabled = true,
        )
    }
}
```