---
title: "SplitSelectableChip"
description: "A `SplitSelectableChip` is a specialized type of `Chip` that includes a slot for a selection
control, such as a radio button. The `SplitSelectableChip` differs from the `SelectableChip` by
having two \"tappable\" areas, one clickable and one selectable."
type: "component"
---

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



A `SplitSelectableChip` is a specialized type of `Chip` that includes a slot for a selection
control, such as a radio button. The `SplitSelectableChip` differs from the `SelectableChip` by
having two "tappable" areas, one clickable and one selectable.

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

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


```kotlin
@Composable
public fun SplitSelectableChip(
    selected: Boolean,
    onSelectionClick: (Boolean) -> Unit,
    label: @Composable RowScope.() -> Unit,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: @Composable (RowScope.() -> Unit)? = null,
    colors: SplitSelectableChipColors = SelectableChipDefaults.splitSelectableChipColors(),
    enabled: Boolean = true,
    selectionInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = SelectableChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    selectionControl: @Composable BoxScope.() -> Unit = {
        RadioButton(selected = selected, enabled = enabled)
    },
): Unit
```


#### Parameters

| | |
| --- | --- |
| selected | Boolean flag indicating whether this button is currently selected. |
| onSelectionClick | Callback to be invoked when this button is selected. |
| label | A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned. |
| onContainerClick | Callback to be invoked when the user clicks the main body of the chip, the area containing the labels. |
| modifier | Modifier to be applied to the chip |
| secondaryLabel | A slot for providing the chip's secondary label. The contents are expected to be "start" or "center" aligned. label and secondaryLabel contents should be consistently aligned. |
| colors | `SplitSelectableChipColors` that will be used to resolve the background and content color for this chip in different states, see `SelectableChipDefaults.splitSelectableChipColors`. |
| enabled | Controls the enabled state of the chip. When `false`, this chip will not be clickable |
| selectionInteractionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this chip's "selectable" tap area. You can use this to change the chip's appearance or preview the chip 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 chip's "clickable" tap area. You can use this to change the chip's appearance or preview the chip in different states. Note that if `null` is provided, interactions will still happen internally. |
| contentPadding | The spacing values to apply internally between the container and the content |
| shape | Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| selectionControl | A slot for providing the chip's selection control. One built-in selection control is provided, see `RadioButton`. For `Checkbox` and `Switch`, use `SplitToggleChip` instead. |






## Code Examples
### SplitSelectableChipWithRadioButton
```kotlin
@Composable
fun SplitSelectableChipWithRadioButton() {
    var selectedRadioIndex by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        SplitSelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 0,
            onSelectionClick = { 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)
            },
            onContainerClick = {
                /* Do something */
            },
            enabled = true,
        )
        Spacer(modifier = Modifier.height(8.dp))
        SplitSelectableChip(
            modifier = Modifier.fillMaxWidth(),
            selected = selectedRadioIndex == 1,
            onSelectionClick = { 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)
            },
            onContainerClick = {
                /* Do something */
            },
            enabled = true,
        )
    }
}
```