toggleable

Compose Modifier

Common

Deprecated Replaced with new overload that only supports IndicationNodeFactory instances inside LocalIndication, and does not use composed

fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit,
) =
    composed(
        inspectorInfo =
            debugInspectorInfo {
                name = "toggleable"
                properties["value"] = value
                properties["enabled"] = enabled
                properties["role"] = role
                properties["onValueChange"] = onValueChange
            }
    ) {
        val localIndication = LocalIndication.current
        val interactionSource =
            if (localIndication is IndicationNodeFactory) {
                null
            } else {
                remember { MutableInteractionSource() }
            }
        Modifier.toggleable(
            value = value,
            interactionSource = interactionSource,
            indication = localIndication,
            enabled = enabled,
            role = role,
            onValueChange = onValueChange,
        )
    }

Configure component to make it toggleable via input and accessibility events

This version has no MutableInteractionSource or Indication parameters, the default indication from LocalIndication will be used. To specify MutableInteractionSource or Indication, use the other overload.

If you are only creating this toggleable modifier inside composition, consider using the other overload and explicitly passing LocalIndication.current for improved performance. For more information see the documentation on the other overload.

Parameters

valuewhether Toggleable is on or off
enabledwhether or not this toggleable will handle input events and appear enabled for semantics purposes
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onValueChangecallback to be invoked when toggleable is clicked, therefore the change of the state in requested.
Common
fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onValueChange: (Boolean) -> Unit,
): Modifier

Configure component to make it toggleable via input and accessibility events

This overload will use the Indication from LocalIndication. Use the other overload to explicitly provide an Indication instance. Note that this overload only supports IndicationNodeFactory instances provided through LocalIndication - it is strongly recommended to migrate to IndicationNodeFactory, but you can use the other overload if you still need to support Indication instances that are not IndicationNodeFactory.

If interactionSource is null, an internal MutableInteractionSource will be lazily created only when needed. This reduces the performance cost of toggleable during composition, as creating the indication can be delayed until there is an incoming androidx.compose.foundation.interaction.Interaction. If you are only passing a remembered MutableInteractionSource and you are never using it outside of toggleable, it is recommended to instead provide null to enable lazy creation. If you need the Indication to be created eagerly, provide a remembered MutableInteractionSource.

Parameters

valuewhether Toggleable is on or off
enabledwhether or not this toggleable will handle input events and appear enabled for semantics purposes
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
interactionSourceMutableInteractionSource that will be used to dispatch PressInteraction.Press when this toggleable is pressed. If null, an internal MutableInteractionSource will be created if needed.
onValueChangecallback to be invoked when toggleable is clicked, therefore the change of the state in requested.
Common
fun Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit,
) =
    clickableWithIndicationIfNeeded(
        interactionSource = interactionSource,
        indication = indication,
    ) { intSource, indicationNodeFactory ->
        ToggleableElement(
            value = value,
            interactionSource = intSource,
            indicationNodeFactory = indicationNodeFactory,
            useLocalIndication = false,
            enabled = enabled,
            role = role,
            onValueChange = onValueChange,
        )
    }

Configure component to make it toggleable via input and accessibility events.

If interactionSource is null, and indication is an IndicationNodeFactory, an internal MutableInteractionSource will be lazily created along with the indication only when needed. This reduces the performance cost of toggleable during composition, as creating the indication can be delayed until there is an incoming androidx.compose.foundation.interaction.Interaction. If you are only passing a remembered MutableInteractionSource and you are never using it outside of toggleable, it is recommended to instead provide null to enable lazy creation. If you need indication to be created eagerly, provide a remembered MutableInteractionSource.

If indication is not an IndicationNodeFactory, and instead implements the deprecated Indication.rememberUpdatedInstance method, you should explicitly pass a remembered MutableInteractionSource as a parameter for interactionSource instead of null, as this cannot be lazily created inside toggleable.

Parameters

valuewhether Toggleable is on or off
interactionSourceMutableInteractionSource that will be used to dispatch PressInteraction.Press when this toggleable is pressed. If null, an internal MutableInteractionSource will be created if needed.
indicationindication to be shown when modified element is pressed. Be default, indication from LocalIndication will be used. Pass null to show no indication, or current value from LocalIndication to show theme default
enabledwhether or not this toggleable will handle input events and appear enabled for semantics purposes
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onValueChangecallback to be invoked when toggleable is clicked, therefore the change of the state in requested.

Code Examples

ToggleableSample

@Composable
fun ToggleableSample() {
    var checked by remember { mutableStateOf(false) }
    // content that you want to make toggleable
    Text(
        modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
        text = checked.toString(),
    )
}