# SplitCheckboxButton

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)( checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, toggleContentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, onContainerClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButtonColors, toggleInteractionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, containerInteractionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, containerClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, secondaryLabel: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` offers slots and a specific layout for a label and secondaryLabel. |

## Functions

### SplitCheckboxButton

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/CheckboxButton.kt+function:SplitCheckboxButton) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun SplitCheckboxButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    toggleContentDescription: String?,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CheckboxButtonDefaults.splitCheckboxButtonShape,
    colors: SplitCheckboxButtonColors = CheckboxButtonDefaults.splitCheckboxButtonColors(),
    toggleInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    containerClickLabel: String? = null,
    contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit
```

The Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` offers 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 a Checkbox at the end.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

A `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` has two tappable areas, one tap area for the labels and another for the checkbox. The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` listener will be associated with the main body of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` and the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` listener associated with the checkbox area only.

Samples: Example of a SplitCheckboxButton:

```kotlin
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.CheckboxButton
import androidx.wear.compose.material3.SplitCheckboxButton
import androidx.wear.compose.material3.Text

var checked by remember { mutableStateOf(true) }
SplitCheckboxButton(
    label = { Text("Split Checkbox Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    checked = checked,
    onCheckedChange = { checked = it },
    toggleContentDescription = "Split Checkbox Button Sample",
    onContainerClick = { /* Do something */ },
    containerClickLabel = "click",
    enabled = true,
)
```

![SplitCheckboxButtonSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_SplitCheckboxButtonSample_CompositeImage.png)

For a SplitCheckboxButton the background of the tappable background area behind the toggle control will have a visual effect applied to provide a "divider" between the two tappable areas.

The recommended set of colors can be obtained from `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CheckboxButtonDefaults`, e.g. `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CheckboxButtonDefaults#splitCheckboxButtonColors()`.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButton.composable#SplitCheckboxButton(kotlin.Boolean,kotlin.Function1,kotlin.String,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.SplitCheckboxButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.String,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,kotlin.Function1)` can be enabled or disabled. A disabled button will not respond to click events.

| Parameters |
|---|---|
| `checked: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | Boolean flag indicating whether this button is currently checked. |
| `onCheckedChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Callback to be invoked when this button's checked status is changed. |
| `toggleContentDescription: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?` | The content description for the checkbox control part of the component. |
| `onContainerClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Click listener called when the user clicks the main body of the button, the area behind the labels. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the button. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the button. When `false`, this button will not be clickable. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CheckboxButtonDefaults.splitCheckboxButtonShape` | 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: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButtonColors = CheckboxButtonDefaults.splitCheckboxButtonColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SplitCheckboxButtonColors` that will be used to resolve the background and content color for this button in different states. |
| `toggleInteractionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this button's "toggleable" 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: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this button's main body "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: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background. |
| `containerClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | Optional click label on the main body of the button for accessibility. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CheckboxButtonDefaults.ContentPadding` | The spacing values to apply internally between the container and the content. |
| `secondaryLabel: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A slot for providing the button's secondary label. The contents are expected to be "start" aligned. |
| `label: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for providing the button's main label. The contents are expected to be text which is "start" aligned. |