We just launched Compose Examples featuring over 150+ components! Check it out →

triStateToggleable

Common

Modifier in Compose Foundation

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

TriStateToggleable should be used when there are dependent Toggleables associated to this component and those can have different values.

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 triStateToggleable 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.8.0-alpha01")
}

Overloads


fun Modifier.triStateToggleable(
    state: ToggleableState,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
)

Parameters

namedescription
statecurrent value for the component
enabledwhether or not this [triStateToggleable] 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
onClickwill be called when user clicks the toggleable.

fun Modifier.triStateToggleable(
    state: ToggleableState,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
)

Parameters

namedescription
statecurrent value for the component
interactionSource[MutableInteractionSource] that will be used to dispatch [PressInteraction.Press] when this triStateToggleable 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 [triStateToggleable] 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
onClickwill be called when user clicks the toggleable.

Code Example

TriStateToggleableSample

@Composable
fun TriStateToggleableSample() {
    var checked by remember { mutableStateOf(ToggleableState.Indeterminate) }
    // content that you want to make toggleable
    Text(
        modifier =
            Modifier.triStateToggleable(
                state = checked,
                onClick = {
                    checked =
                        if (checked == ToggleableState.On) ToggleableState.Off
                        else ToggleableState.On
                }
            ),
        text = checked.toString()
    )
}
by @alexstyl