Skip to content

Checkbox

A foundational component used to build checkboxes in Compose Multiplatform.

Accessible out of the box and fully renderless, so that you can apply any styling you like.

Installation

build.gradle.kts
dependencies {
    implementation("com.composables:core:1.25.0")
}

Basic Example

To create a checkbox use the Checkbox component. To toggle it you can either click it, or press Enter or Spacebar on your keyboard, while the checkbox is focused.

Depending on its state, the checkbox will show its checkIcon or not.

var checked by remember { mutableStateOf(false) }

Checkbox(
    checked = checked,
    onCheckedChange = { checked = it },
    shape = RoundedCornerShape(4.dp),
    backgroundColor = Color.White,
    contentColor = Color.Black
) {
    // will be shown if checked
    Icon(Check, contentDescription = null)
}

Styling

Every component in Compose Unstyled is renderless. They all handle all UX pattern's logic, internal state, accessibility and keyboard interactions for you, but they do not display any information on the screen.

This is by design so that you can style your components exactly to your needs.

Most of the times, styling is done using Modifiers of your choise. However, sometimes this is not enough due to the order of the Modifiers affecting the visual outcome.

For such cases we provide specific styling parameters.

Code Example

Below is a detailed example from CheckboxDemo.kt:

@Composable
fun CheckboxDemo() {
    Box(
        modifier = Modifier.fillMaxSize().background(Brush.linearGradient(listOf(Color(0xFF8E2DE2), Color(0xFF4A00E0)))),
        contentAlignment = Alignment.Center
    ) {
        var checked by remember { mutableStateOf(false) }
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = it },
            shape = RoundedCornerShape(4.dp),
            backgroundColor = Color.White,
            borderWidth = 1.dp,
            borderColor = Color.Black.copy(0.33f),
            modifier = Modifier.size(24.dp),
            contentDescription = "Add olives"
        ) {
            Icon(Check, contentDescription = null)
        }
    }
}

Keyboard Interactions

Key Description
Enter
 Toggles the checkbox, triggering its onCheckedChange callback
Space
 Toggles the checkbox, triggering its onCheckedChange callback

Component API

Parameter Description
checked Whether the checkbox is checked.
onCheckedChange Callback when the checked state changes.
backgroundColor Background color of the checkbox.
contentColor Color of the content inside the checkbox.
borderColor Color of the border.
borderWidth Width of the border.
shape Shape of the checkbox.
modifier Modifier to be applied to the checkbox.
contentDescription Accessibility description of the checkbox.
checkIcon Composable function to define the check icon.

Check Icon and other icons

You can find the check icon used in our examples and many other icons at composeicons.com.

Styled Examples

Looking for styled components for Jetpack Compose or Compose Multiplatform?

Explore a rich collection of production ready examples at ComposablesUi.com

Composables UI