toggleable/io.daio.wild.components.toggleable/Toggleable

Toggleable

@Composable

fun Toggleable(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, style: Style = ToggleableDefaults.style(), interactionSource: MutableInteractionSource? = null, content: @Composable BoxScope.() -> Unit)

Base toggleable component for building selection controls (switches, checkboxes, radio buttons).

This is the selection-control equivalent of Container - it handles checked/unchecked state, maps it to the selected interaction state in the Style system, and applies the appropriate accessibility semantics.

The checked state maps to the selected interaction state, allowing different visuals for checked vs unchecked via Style.colors, Style.borders, etc.

Consumers build specific controls by wrapping this with:

A semantic role via Modifier.semantics { role = Role.Switch } etc.
Default dimensions appropriate to the control type
Visual content (thumb, check mark, dot, etc.)

Since

0.6.0

Example - building a Switch:

Toggleable(
    checked = isOn,
    onCheckedChange = { isOn = it },
    modifier = Modifier
        .size(width = 48.dp, height = 24.dp)
        .semantics { role = Role.Switch },
    style = StyleDefaults.style(
        colors = StyleDefaults.colors(
            backgroundColor = Color.Gray,
            selectedBackgroundColor = Color.Green,
        ),
    ),
) {
    // Draw your thumb here
}

Example - building a Checkbox:

Toggleable(
    checked = isChecked,
    onCheckedChange = { isChecked = it },
    modifier = Modifier
        .size(20.dp)
        .semantics { role = Role.Checkbox },
    style = myCheckboxStyle,
) {
    if (isChecked) {
        Icon(Icons.Default.Check, contentDescription = null)
    }
}

Parameters

checked

Whether the control is currently in the "on" or "checked" state.

onCheckedChange

Callback invoked when the checked state should change.

modifier

Modifier to apply to the toggleable.

enabled

Whether the control is enabled.

style

The Style for interaction states. Use selected variants for the checked state.

interactionSource

Optional MutableInteractionSource for observing Interactions.

content

Visual content of the control.