# TriStateCheckbox

Common/AllAndroid/JVM

## 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/compose/material3/TriStateCheckbox.composable#TriStateCheckbox(androidx.compose.ui.state.ToggleableState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)( state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState, onClick: (() -> 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, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` [Material Design checkbox](https://m3.material.io/components/checkbox/guidelines) | Cmn |
| `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/compose/material3/TriStateCheckbox.composable#TriStateCheckbox(androidx.compose.ui.state.ToggleableState,kotlin.Function0,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)( state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState, onClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, checkmarkStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, outlineStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` [Material Design checkbox](https://m3.material.io/components/checkbox/guidelines) | Cmn |

## Functions

### TriStateCheckbox

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Checkbox.kt+function:TriStateCheckbox)

```
@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit
```

[Material Design checkbox](https://m3.material.io/components/checkbox/guidelines)

Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

![Checkbox
image](https://developer.android.com/images/reference/androidx/compose/material3/indeterminate-checkbox.png)

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.selection.triStateToggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.material3.TriStateCheckbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp

Column {
    // define dependent checkboxes states
    val (state, onStateChange) = rememberSaveable { mutableStateOf(true) }
    val (state2, onStateChange2) = rememberSaveable { mutableStateOf(true) }

    // TriStateCheckbox state reflects state of dependent checkboxes
    val parentState =
        remember(state, state2) {
            if (state && state2) ToggleableState.On
            else if (!state && !state2) ToggleableState.Off else ToggleableState.Indeterminate
        }
    // click on TriStateCheckbox can set state for dependent checkboxes
    val onParentClick = {
        val s = parentState != ToggleableState.On
        onStateChange(s)
        onStateChange2(s)
    }

    // The sample below composes just basic checkboxes which are not fully accessible on their
    // own. See the CheckboxWithTextSample as a way to ensure your checkboxes are fully
    // accessible.
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier =
            Modifier.triStateToggleable(
                state = parentState,
                onClick = onParentClick,
                role = Role.Checkbox,
            ),
    ) {
        TriStateCheckbox(state = parentState, onClick = null)
        Text("Receive Emails")
    }
    Spacer(Modifier.size(25.dp))
    Column(Modifier.padding(24.dp, 0.dp, 0.dp, 0.dp)) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier =
                Modifier.toggleable(
                    value = state,
                    onValueChange = onStateChange,
                    role = Role.Checkbox,
                ),
        ) {
            Checkbox(state, null)
            Text("Daily")
        }
        Spacer(Modifier.size(25.dp))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier =
                Modifier.toggleable(
                    value = state2,
                    onValueChange = onStateChange2,
                    role = Role.Checkbox,
                ),
        ) {
            Checkbox(state2, null)
            Text("Weekly")
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState` | whether this checkbox is checked, unchecked, or in an indeterminate state |
| `onClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?` | called when this checkbox is clicked. If `null`, then this checkbox will not be interactable, unless something else handles its input events and updates its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#TriStateCheckbox(androidx.compose.ui.state.ToggleableState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this checkbox |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this checkbox. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors = CheckboxDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors` that will be used to resolve the colors used for this checkbox in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxDefaults#colors()`. |
| `interactionSource: 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 checkbox. You can use this to change the checkbox's appearance or preview the checkbox in different states. Note that if `null` is provided, interactions will still happen internally. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/Checkbox.composable#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)` | if you want a simple component that represents Boolean state |

### TriStateCheckbox

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/Checkbox.kt+function:TriStateCheckbox)

```
@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    checkmarkStroke: Stroke,
    outlineStroke: Stroke,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit
```

[Material Design checkbox](https://m3.material.io/components/checkbox/guidelines)

Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

![Checkbox
image](https://developer.android.com/images/reference/androidx/compose/material3/indeterminate-checkbox.png)

This Checkbox function offers greater flexibility in visual customization. Using the `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` parameters, you can control the appearance of both the checkmark and the box that surrounds it.

A sample of a `TriStateCheckbox` that uses a `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` with rounded `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeCap` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeJoin`:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.selection.triStateToggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TriStateCheckbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp

val strokeWidthPx = with(LocalDensity.current) { floor(CheckboxDefaults.StrokeWidth.toPx()) }
val checkmarkStroke =
    remember(strokeWidthPx) {
        Stroke(width = strokeWidthPx, cap = StrokeCap.Round, join = StrokeJoin.Round)
    }
val outlineStroke = remember(strokeWidthPx) { Stroke(width = strokeWidthPx) }
Column {
    // define dependent checkboxes states
    val (state, onStateChange) = rememberSaveable { mutableStateOf(true) }
    val (state2, onStateChange2) = rememberSaveable { mutableStateOf(true) }

    // TriStateCheckbox state reflects state of dependent checkboxes
    val parentState =
        remember(state, state2) {
            if (state && state2) ToggleableState.On
            else if (!state && !state2) ToggleableState.Off else ToggleableState.Indeterminate
        }
    // click on TriStateCheckbox can set state for dependent checkboxes
    val onParentClick = {
        val s = parentState != ToggleableState.On
        onStateChange(s)
        onStateChange2(s)
    }

    // The sample below composes just basic checkboxes which are not fully accessible on their
    // own. See the CheckboxWithTextSample as a way to ensure your checkboxes are fully
    // accessible.
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier =
            Modifier.triStateToggleable(
                state = parentState,
                onClick = onParentClick,
                role = Role.Checkbox,
            ),
    ) {
        TriStateCheckbox(
            state = parentState,
            onClick = null,
            checkmarkStroke = checkmarkStroke,
            outlineStroke = outlineStroke,
        )
        Text("Receive Emails")
    }
    Spacer(Modifier.size(25.dp))
    Column(Modifier.padding(24.dp, 0.dp, 0.dp, 0.dp)) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier =
                Modifier.toggleable(
                    value = state,
                    onValueChange = onStateChange,
                    role = Role.Checkbox,
                ),
        ) {
            Checkbox(
                checked = state,
                onCheckedChange = null,
                checkmarkStroke = checkmarkStroke,
                outlineStroke = outlineStroke,
            )
            Text("Daily")
        }
        Spacer(Modifier.size(25.dp))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier =
                Modifier.toggleable(
                    value = state2,
                    onValueChange = onStateChange2,
                    role = Role.Checkbox,
                ),
        ) {
            Checkbox(
                checked = state2,
                onCheckedChange = null,
                checkmarkStroke = checkmarkStroke,
                outlineStroke = outlineStroke,
            )
            Text("Weekly")
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState` | whether this checkbox is checked, unchecked, or in an indeterminate state |
| `onClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?` | called when this checkbox is clicked. If `null`, then this checkbox will not be interactable, unless something else handles its input events and updates its `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#TriStateCheckbox(androidx.compose.ui.state.ToggleableState,kotlin.Function0,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.graphics.drawscope.Stroke,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)`. |
| `checkmarkStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` | stroke for the checkmark. |
| `outlineStroke: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/Stroke` | stroke for the checkmark's box outline. Note that this stroke is applied when drawing the outline's rounded rectangle, so attributions such as `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/StrokeJoin` will be ignored. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this checkbox |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | controls the enabled state of this checkbox. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors = CheckboxDefaults.colors()` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxColors` that will be used to resolve the colors used for this checkbox in different states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/CheckboxDefaults#colors()`. |
| `interactionSource: 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 checkbox. You can use this to change the checkbox's appearance or preview the checkbox in different states. Note that if `null` is provided, interactions will still happen internally. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/Checkbox.composable#Checkbox(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.CheckboxColors,androidx.compose.foundation.interaction.MutableInteractionSource)` | if you want a simple component that represents Boolean state |