Compose Unstyled 2.0 is out! Check the official announcement blog ->

Tri-State Checkbox

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.

View on GitHub
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp
import com.composables.ui.components.Checkbox
import com.composables.ui.components.Text
import com.composables.ui.components.TriStateCheckbox

@Composable
fun TriStateCheckboxExample() {
    var marketing by remember { mutableStateOf(true) }
    var product by remember { mutableStateOf(false) }
    var security by remember { mutableStateOf(true) }

    val allSelected = marketing && product && security
    val noneSelected = !marketing && !product && !security
    val state = when {
        allSelected -> ToggleableState.On
        noneSelected -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }

    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
        TriStateCheckbox(
            state = state,
            onStateChange = { nextState ->
                val selected = nextState == ToggleableState.On
                marketing = selected
                product = selected
                security = selected
            },
        ) {
            Text("Select all")
        }

        Column(verticalArrangement = Arrangement.spacedBy(10.dp)) {
            Checkbox(checked = marketing, onCheckedChange = { marketing = it }) {
                Text("Marketing updates")
            }
            Checkbox(checked = product, onCheckedChange = { product = it }) {
                Text("Product announcements")
            }
            Checkbox(checked = security, onCheckedChange = { security = it }) {
                Text("Security alerts")
            }
        }
    }
}

Installation

implementation("com.composables:ui:0.1.0")

Examples

Disabled

View on GitHub
import androidx.compose.runtime.Composable
import androidx.compose.ui.state.ToggleableState
import com.composables.ui.components.Text
import com.composables.ui.components.TriStateCheckbox

@Composable
fun DisabledTriStateCheckboxExample() {
    TriStateCheckbox(
        state = ToggleableState.Off,
        onStateChange = {},
        enabled = false,
    ) {
        Text("Select all")
    }
}

API Reference

TriStateCheckbox

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

@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.