TriState Checkbox in Jetpack Compose

The TriState checkbox is a type of checkbox that allows three states: checked, unchecked, and indeterminate. People commonly use it when they deal with hierarchical data or when they need to select multiple items with varying levels of selection.

The checkbox can have a parent-child relationship with other checkboxes. When the parent is checked then all the child checkboxes will be checked. If the parent is unchecked then all the child is also unchecked. And if some child checkboxes are checked then the parent checkbox becomes an indeterminate checkbox.

To achieve this parent and child relationship, we use the tristate checkbox in jetpack compose. Let’s see how can we implement this:

Prerequisites

• Kotlin If/Else statements
• Kotlin Lambda
• Remember API of Jetpack Compose
• Jetpack Compose Modifier
• Jetpack Compose Checkbox

TriState Checkbox

First of all, we define states for the dependent checkboxes (Child Checkboxes).

val (state, onStateChange) = remember {
            mutableStateOf(false)
        }
val (state2, onStateChange2) = remember {
            mutableStateOf(false)
        }
val (state3, onStateChange3) = remember {
            mutableStateOf(false)
        }

state, state2, and state3 are variables of type boolean and onStateChange, onStateChange2 and onStateChange3 are functions that take boolean as a parameter and return nothing.

We will create a state for the tristate checkbox that reflects the state of dependent checkboxes.

val parentState = remember(state, state2, state3) {
            if (state && state2 && state3) ToggleableState.On
            else if (!state && !state2 && !state3) ToggleableState.Off
            else ToggleableState.Indeterminate
        }

parentState – This is a parameter of type ToggleableState that is an enum class and returns a boolean value or indeterminate state for the TriState Checkbox or parent checkbox.

remember – It is a function that remembers the value returned by calculation inside the lambda body if the value of state, state2 and state3 is equal to the previous value, otherwise produces and remembers a new value by calling calculation.

Inside the lambda body of remember function, if the state of all checkboxes is true then set parentState to On, if false then off otherwise (if the state of some checkbox is true and others are false) to the indeterminate state.

After this, we will create a lambda function that will be called when the user clicks on the parent checkbox.

val onParentClick = {
            val s = parentState != ToggleableState.On
            onStateChange(s)
            onStateChange2(s)
            onStateChange3(s)
        }

In the above code, we check if the value of parentState is not equal to ToggleableState.On. If the condition is true then true will be assigned to s variable otherwise false. Now we call all the state change functions of the checkboxes with a boolean parameter s which represents the new state of the checkboxes.

Now we simply call the TriStateCheckbox function

TriStateCheckbox(
                state = parentState,
                onClick = onParentClick
            )

We call each Checkbox

Checkbox(checked = state, onCheckedChange = onStateChange)
Checkbox(checked = state2, onCheckedChange = onStateChange2)
Checkbox(checked = state3, onCheckedChange = onStateChange3)

Complete Code Link

Output:

We can customize the TriStateCheckbox by following the same methods we did in the checkbox post.

The TristateCheckbox in Jetpack Compose is a powerful and versatile component that offers great flexibility in handling three-state selections. By leveraging the power of Jetpack Compose and the TristateCheckbox component, we can elevate our UI designs and deliver exceptional user experiences.

Happy Composing 🙂