Material 3 Checkboxes in Jetpack Compose

Get started with Material 3 checkboxes in Jetpack Compose to create user-friendly interfaces for selecting multiple items or toggling options.

Explore Checkbox Styles

Learn to implement Material 3 checkboxes for user selections.

Standard Checkbox

Creates a checkbox for toggling a single option.

@Composable
fun CheckboxMinimalExample() {
    var checked by remember { mutableStateOf(true) }
    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Text("Minimal checkbox")
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it }
        )
    }
    Text(
        if (checked) "Checkbox is checked" else "Checkbox is unchecked"
    )
}
  

Use a Standard Checkbox when you want to toggle a single option.

Examples:

• Toggle settings in a preferences screen
• Select items in a form
• Indicate agreement to terms

---

TriState Checkbox

Creates a parent checkbox controlling multiple child checkboxes with an indeterminate state.

@Composable
fun CheckboxParentExample() {
    val childCheckedStates = remember { mutableStateListOf(false, false, false) }
    val parentState = when {
        childCheckedStates.all { it } -> ToggleableState.On
        childCheckedStates.none { it } -> ToggleableState.Off
        else -> ToggleableState.Indeterminate
    }
    Column {
        Row(
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text("Select all")
            TriStateCheckbox(
                state = parentState,
                onClick = {
                    val newState = parentState != ToggleableState.On
                    childCheckedStates.forEachIndexed { index, _ ->
                        childCheckedStates[index] = newState
                    }
                }
            )
        }
        childCheckedStates.forEachIndexed { index, checked ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Text("Option ${index + 1}")
                Checkbox(
                    checked = checked,
                    onCheckedChange = { isChecked ->
                        childCheckedStates[index] = isChecked
                    }
                )
            }
        }
    }
    if (childCheckedStates.all { it }) {
        Text("All options selected")
    }
}
  

Use a TriState Checkbox when you want to control multiple child checkboxes with an indeterminate state.

Examples:

• Select all items in a list
• Group options in a settings panel
• Manage multiple selections in a form

---

Checkbox Properties

Understand the key properties used in the checkbox examples.

Property	Usage
checked	Boolean for Checkbox state (true/false)
onCheckedChange	Lambda called when Checkbox is tapped
state	ToggleableState for TriStateCheckbox (On/Off/Indeterminate)
onClick	Lambda for TriStateCheckbox click handling