Checkbox

Functions summary

Unit
@Composable
Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier,
    enabled: Boolean,
    colors: CheckboxColors,
    interactionSource: MutableInteractionSource?
)

Material Design checkbox

Cmn
Unit
@Composable
Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    checkmarkStroke: Stroke,
    outlineStroke: Stroke,
    modifier: Modifier,
    enabled: Boolean,
    colors: CheckboxColors,
    interactionSource: MutableInteractionSource?
)

Material Design checkbox

Cmn

Functions

Checkbox

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

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.interaction.MutableInteractionSource
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) }
val interactionSource = remember { MutableInteractionSource() }
Row(
    Modifier.fillMaxWidth()
        .height(56.dp)
        .toggleable(
            value = checkedState,
            onValueChange = { onStateChange(!checkedState) },
            role = Role.Checkbox,
            indication = null,
            interactionSource = interactionSource,
        )
        .padding(horizontal = 16.dp),
    verticalAlignment = Alignment.CenterVertically,
) {
    Checkbox(
        checked = checkedState,
        interactionSource = interactionSource,
        onCheckedChange = onStateChange,
    )
    Text(
        text = "Option selection",
        style = MaterialTheme.typography.bodyLarge,
        modifier = Modifier.padding(start = 16.dp),
    )
}
Parameters
checked: Boolean

whether this checkbox is checked or unchecked

onCheckedChange: ((Boolean) -> Unit)?

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.

modifier: Modifier = Modifier

the Modifier to be applied to this checkbox

enabled: Boolean = 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: CheckboxColors = CheckboxDefaults.colors()

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

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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
TriStateCheckbox

if you require support for an indeterminate state.

Checkbox

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    checkmarkStroke: Stroke,
    outlineStroke: Stroke,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

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

This Checkbox function offers greater flexibility in visual customization. Using the Stroke parameters, you can control the appearance of both the checkmark and the box that surrounds it.

A sample of a Checkbox that uses a Stroke with rounded StrokeCap and androidx.compose.ui.graphics.StrokeJoin:

import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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

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) }
val checkedState = remember { mutableStateOf(true) }
Checkbox(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it },
    checkmarkStroke = checkmarkStroke,
    outlineStroke = outlineStroke,
)
Parameters
checked: Boolean

whether this checkbox is checked or unchecked

onCheckedChange: ((Boolean) -> Unit)?

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.

checkmarkStroke: Stroke

stroke for the checkmark.

outlineStroke: 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 androidx.compose.ui.graphics.StrokeJoin will be ignored.

modifier: Modifier = Modifier

the Modifier to be applied to this checkbox

enabled: Boolean = 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: CheckboxColors = CheckboxDefaults.colors()

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

interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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
TriStateCheckbox

if you require support for an indeterminate state.