Exploring Jetpack Compose: Checkbox

E

If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’ll be writing on Compose!

Checkboxes are crucial components when it comes to common areas of our applications. Be it settings screens, forms or any kind of content that needs to allow the user to toggle the checked state of the component – the Checkbox is essential in these scenarios. When it comes to this component, the Jetpack Compose provides a minimalistic approach to implementing this component within our UI. If we jump into the source code then we’ll see the available composable function for this component:

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier.None,
    color: Color = (+MaterialTheme.colors()).secondary
)

As we can see here there are four available properties that we can pass to the Checkbox function:

  • checked – whether or not the checkbox is currently checked. This is required
  • onCheckedChange – a callback that will receive change events for when the checkbox selected state changes. Whilst this is required, null can be passed as a value
  • modifier – the modifier(s) to be applied to the checkbox
  • color – the color to be used for the checkbox. If not provided, then the secondary color from the application theme will be applied

With the above in mind we can created a simple checkbox by providing the two required values for checked and onCheckedChange, as shown below:

@Composable
fun CheckboxComponent() {
    Checkbox(
            checked = false,
            onCheckedChange = null
    )
}

Let’s change our checked value to true so that we can see the checked state in action:

@Composable
fun CheckboxComponent() {
    Checkbox(
            checked = true,
            onCheckedChange = null
    )
}

We can mix things up a little further by providing a value for the color property, overriding the use our the secondary color from our application theme:

@Composable
fun CheckboxComponent() {
    Checkbox(
            checked = true,
            onCheckedChange = null,
            Color = Color.Red
    )
}

Whilst the above looks great, statically defining the checked value, along with not reacting to check changed events, doesn’t really resemble how we might handle this in a real world scenario. To approach this, let’s being by created a new @Model representation that will house the state for our checkbox:

@Model
class FormState(var optionChecked: Boolean = false)

This class will only be holding our checked state for this example. But with this in place we can now pass this FormState class to our CheckboxComponent function, so that it can be used to assign values to the required properties.

@Composable
fun CheckboxComponent(formState: FormState) {
    Checkbox(
            checked = formState.optionChecked,
            onCheckedChange = null
    )
}

Now, whatever the value of our optionChecked is inside of our FormState reference, this will be represented in the state of the checkbox. So when optionChecked is false our checkbox will be unchecked and vice versa. Whilst this optionChecked value could be changed somewhere with in our code, it make sense to update this value within our onCheckedChange callback:

@Composable
fun CheckboxComponent(formState: FormState) {
    Checkbox(
            checked = formState.optionChecked,
            onCheckedChange = { checked ->
                formState.optionChecked = checked
            }
    )
}

Now whenever our onCheckedChange is triggered, our formState optionChecked reference will be updated to reflect the new checked value. This will then cause the checkbox to be updated to reflect this value, allowing our checkbox to be toggled between checked and unchecked.


In this post we’ve taken a quick dive into the Checkbox component from Jetpack Compose. Stay tuned for the next post and in the meantime, subscribe to updates on my Jetpack Compose book 🙂

About the author

hitherejoe

Add Comment

By hitherejoe