---
title: Tri-State Checkbox
description: Parent checkboxes that represent checked, unchecked, and mixed child selection.
---

Use tri-state checkboxes when a parent control summarizes the selection state of nested options.

<UiDemo id="checkbox-tri-state" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/TriStateCheckbox.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Disabled

<UiDemo id="checkbox-tri-state-disabled" />

## API Reference

### TriStateCheckbox

A checkbox that can represent on, off, or mixed selection state.

```kotlin
@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onStateChange: (ToggleableState) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    accessibilityLabel: String? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: (@Composable RowScope.() -> Unit)? = null,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | `ToggleableState` | Current toggleable state shown by the checkbox. |
| `onStateChange` | `(ToggleableState) -> Unit` | Called when the tri-state checkbox changes state. |
| `modifier` | `Modifier` | Modifier applied to the checkbox row. |
| `enabled` | `Boolean` | Whether the checkbox can be interacted with. |
| `accessibilityLabel` | `String?` | Accessible label announced for the checkbox. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for focus and press state. |
| `content` | `(@Composable RowScope.() -> Unit)?` | Optional label or supporting content displayed next to the checkbox. |