---
title: "SplitToggleChip"
description: "A `SplitToggleChip` is a specialized type of `Chip` that includes a slot for a toggle control,
such as a toggle or checkbox. The `SplitToggleChip` differs from the `ToggleChip` by having two
\"tappable\" areas, one clickable and one toggleable."
type: "component"
---

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



A `SplitToggleChip` is a specialized type of `Chip` that includes a slot for a toggle control,
such as a toggle or checkbox. The `SplitToggleChip` differs from the `ToggleChip` by having two
"tappable" areas, one clickable and one toggleable.

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

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


```kotlin
@Composable
public fun SplitToggleChip(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    label: @Composable RowScope.() -> Unit,
    onClick: () -> Unit,
    toggleControl: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: @Composable (RowScope.() -> Unit)? = null,
    colors: SplitToggleChipColors = ToggleChipDefaults.splitToggleChipColors(),
    enabled: Boolean = true,
    checkedInteractionSource: MutableInteractionSource? = null,
    clickInteractionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ToggleChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
): Unit
```


#### Parameters

| | |
| --- | --- |
| checked | Boolean flag indicating whether this button is currently checked. |
| onCheckedChange | Callback to be invoked when this buttons checked status is changed. |
| label | A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned. |
| onClick | Click listener called when the user clicks the main body of the chip, the area behind the labels. |
| toggleControl | A slot for providing the chip's toggle controls(s). Two built-in types of toggle control are supported, see `Checkbox` and `Switch`. For `RadioButton`, use `SelectableChip` instead. `ImageVector`s can be obtained from `ToggleChipDefaults.switchIcon`, `ToggleChipDefaults.radioIcon` and `ToggleChipDefaults.checkboxIcon`. In order to correctly render when the Chip is not enabled the icon must set its alpha value to `LocalContentAlpha`. |
| 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 | `SplitToggleChipColors` that will be used to resolve the background and content color for this chip in different states, see `ToggleChipDefaults.splitToggleChipColors`. |
| enabled | Controls the enabled state of the chip. When `false`, this chip will not be clickable |
| checkedInteractionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this chip's "toggleable" 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. |
| clickInteractionSource | 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 |






## Code Examples
### SplitToggleChipWithCheckbox
```kotlin
@Composable
fun SplitToggleChipWithCheckbox() {
    var checked by remember { mutableStateOf(true) }
    // The primary label should have a maximum 3 lines of text
    // and the secondary label should have max 2 lines of text.
    SplitToggleChip(
        label = { Text("Split with CheckboxIcon", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        checked = checked,
        toggleControl = { Checkbox(checked = checked, enabled = true) },
        onCheckedChange = { checked = it },
        onClick = {
            /* Do something */
        },
        enabled = true,
    )
}
```