New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

toggleable

Common

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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads


fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
)

Parameters

namedescription
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.

fun Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
)

Parameters

namedescription
valuewhether Toggleable is on or off
interactionSource[MutableInteractionSource] 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 Example

ToggleableSample

@Composable
@Sampled
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()
    )
}