{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

CheckboxKt

public final class CheckboxKt


Summary

Public methods

static final void
@Composable
Checkbox(
    boolean checked,
    Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull CheckboxColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design checkbox.

static final void
@Composable
TriStateCheckbox(
    @NonNull ToggleableState state,
    Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull CheckboxColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design checkbox parent.

Public methods

Checkbox

@Composable
public static final void Checkbox(
    boolean checked,
    Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull CheckboxColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design checkbox.

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Checkbox image

Simple Checkbox sample:

import androidx.compose.material3.Checkbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val checkedState = remember { mutableStateOf(true) }
Checkbox(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)

Combined Checkbox with Text sample:

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Checkbox
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

val (checkedState, onStateChange) = remember { mutableStateOf(true) }
Row(
    Modifier
        .fillMaxWidth()
        .height(56.dp)
        .toggleable(
            value = checkedState,
            onValueChange = { onStateChange(!checkedState) },
            role = Role.Checkbox
        )
        .padding(horizontal = 16.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Checkbox(
        checked = checkedState,
        onCheckedChange = null // null recommended for accessibility with screenreaders
    )
    Text(
        text = "Option selection",
        style = MaterialTheme.typography.bodyLarge,
        modifier = Modifier.padding(start = 16.dp)
    )
}
Parameters
boolean checked

whether this checkbox is checked or unchecked

Function1<@NonNull BooleanUnit> onCheckedChange

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

@NonNull Modifier modifier

the Modifier to be applied to this checkbox

boolean enabled

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.

@NonNull CheckboxColors colors

CheckboxColors that will be used to resolve the colors used for this checkbox in different states. See CheckboxDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this checkbox. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this checkbox in different states.

See also
TriStateCheckbox

if you require support for an indeterminate state.

TriStateCheckbox

@Composable
public static final void TriStateCheckbox(
    @NonNull ToggleableState state,
    Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull CheckboxColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design checkbox parent.

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

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
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.ui.Modifier
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp

Column {
    // define dependent checkboxes states
    val (state, onStateChange) = remember { mutableStateOf(true) }
    val (state2, onStateChange2) = remember { 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.
    TriStateCheckbox(
        state = parentState,
        onClick = onParentClick,
    )
    Spacer(Modifier.size(25.dp))
    Column(Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp)) {
        Checkbox(state, onStateChange)
        Spacer(Modifier.size(25.dp))
        Checkbox(state2, onStateChange2)
    }
}
Parameters
@NonNull ToggleableState state

whether this checkbox is checked, unchecked, or in an indeterminate state

Function0<Unit> onClick

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

@NonNull Modifier modifier

the Modifier to be applied to this checkbox

boolean enabled

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.

@NonNull CheckboxColors colors

CheckboxColors that will be used to resolve the colors used for this checkbox in different states. See CheckboxDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this checkbox. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this checkbox in different states.

See also
Checkbox

if you want a simple component that represents Boolean state