New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

Checkbox

Android

[Checkbox] provides an animated checkbox for use as a toggle control in [ToggleChip] or [SplitToggleChip].

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

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

Parameters

namedescription
checkedBoolean flag indicating whether this checkbox is currently checked.
modifierModifier to be applied to the checkbox. This can be used to provide a content description for accessibility.
colors[CheckboxColors] from which the box and checkmark colors will be obtained.
enabledBoolean flag indicating the enabled state of the [Checkbox] (affects the color).
onCheckedChangeCallback to be invoked when Checkbox is clicked. If null, then this is passive and relies entirely on a higher-level component to control the state (such as [ToggleChip] or [SplitToggleChip]).
interactionSourceWhen also providing [onCheckedChange], an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s 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.

Code Example

SplitToggleChipWithCheckbox

@Composable
@Sampled
fun SplitToggleChipWithCheckbox() {
    var checked by remember { mutableStateOf(true) }
    // The primary label should have a maximum 3 lines of text
    // and the secondary label should have max 2 lines of text.
    SplitToggleChip(
        label = {
            Text("Split with CheckboxIcon", maxLines = 3, overflow = TextOverflow.Ellipsis)
        },
        checked = checked,
        toggleControl = {
            Checkbox(
                checked = checked,
                enabled = true,
            )
        },
        onCheckedChange = { checked = it },
        onClick = {
            /* Do something */
        },
        enabled = true,
    )
}