---
title: "CheckboxButton"
description: "The Wear Material `CheckboxButton` offers three 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 and a column containing the two label slots in the middle."
type: "component"
---

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



The Wear Material `CheckboxButton` offers three 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 and a column containing the two label slots in the middle.

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

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


```kotlin
@Composable
public fun CheckboxButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CheckboxButtonDefaults.checkboxButtonShape,
    colors: CheckboxButtonColors = CheckboxButtonDefaults.checkboxButtonColors(),
    contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    icon: @Composable (BoxScope.() -> Unit)? = null,
    secondaryLabel: @Composable (RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| checked | Boolean flag indicating whether this button is currently checked. |
| onCheckedChange | Callback to be invoked when this button's checked status is changed. |
| modifier | Modifier to be applied to the `CheckboxButton`. |
| 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 | `CheckboxButtonColors` 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 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. |
| 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 a horizontally and vertically center aligned 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 and no more than 2 lines of text. |
| label | A slot for providing the button's main label. The contents are expected to be text which is "start" aligned and no more than 3 lines of text. |






## Code Examples
### CheckboxButtonSample
```kotlin
@Preview
@Composable
fun CheckboxButtonSample() {
    var checked by remember { mutableStateOf(true) }
    CheckboxButton(
        label = { Text("Checkbox Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        secondaryLabel = {
            Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
        },
        checked = checked,
        onCheckedChange = { checked = it },
        icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
        enabled = true,
    )
}
```