androidx.compose.foundation.selection

Kotlin |Java

Extension functions summary

For Modifier
Modifier	`Modifier.selectable(selected: Boolean, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onClick: () -> Unit)` Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time.
Modifier	`Modifier.toggleable(value: Boolean, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onValueChange: (Boolean) -> Unit)` Configure component to make it toggleable via input and accessibility events
Modifier	`Modifier.triStateToggleable(state: ToggleableState, enabled: Boolean = true, role: Role? = null, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = AmbientIndication.current(), onClick: () -> Unit)` Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

Extension functions

selectable

@Composable fun Modifier.selectable(
    selected: Boolean, 
    enabled: Boolean = true, 
    role: Role? = null, 
    interactionState: InteractionState = remember { InteractionState() }, 
    indication: Indication? = AmbientIndication.current(), 
    onClick: () -> Unit
): Modifier

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. A typical example of mutually exclusive set is a RadioGroup or a row of Tabs.

If you want to make an item support on/off capabilities without being part of a set, consider using Modifier.toggleable

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.selection.selectable
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val option1 = Color.Red
val option2 = Color.Blue
var selectedOption by remember { mutableStateOf(option1) }
Column {
    Text("Selected: $selectedOption")
    Row {
        listOf(option1, option2).forEach { color ->
            val selected = selectedOption == color
            Box(
                Modifier
                    .size(100.dp)
                    .background(color = color)
                    .selectable(
                        selected = selected,
                        onClick = { selectedOption = color }
                    )
            )
        }
    }
}

Parameters
selected: Boolean	whether or not this item is selected in a mutually exclusion set
onClick: () -> Unit	callback to invoke when this item is clicked
enabled: Boolean = true	whether or not this selectable will handle input events and appear enabled from a semantics perspective
role: Role? = null	the type of user interface element. Accessibility services might use this to describe the element or do customizations
interactionState: InteractionState = remember { InteractionState() }	InteractionState that will be updated when this element is pressed, using Interaction.Pressed
indication: Indication? = AmbientIndication.current()	indication to be shown when the modified element is pressed. By default, the indication from AmbientIndication will be used. Set to `null` to show no indication

toggleable

@Composable fun Modifier.toggleable(
    value: Boolean, 
    enabled: Boolean = true, 
    role: Role? = null, 
    interactionState: InteractionState = remember { InteractionState() }, 
    indication: Indication? = AmbientIndication.current(), 
    onValueChange: (Boolean) -> Unit
): Modifier

Configure component to make it toggleable via input and accessibility events

import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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()
)

See Also

Modifier.triStateToggleable

Parameters
value: Boolean	whether Toggleable is on or off
onValueChange: (Boolean) -> Unit	callback to be invoked when toggleable is clicked, therefore the change of the state in requested.
enabled: Boolean = true	whether or not this toggleable will handle input events and appear enabled for semantics purposes
role: Role? = null	the type of user interface element. Accessibility services might use this to describe the element or do customizations
interactionState: InteractionState = remember { InteractionState() }	InteractionState that will be updated when this toggleable is pressed, using Interaction.Pressed
indication: Indication? = AmbientIndication.current()	indication to be shown when modified element is pressed. Be default, indication from AmbientIndication will be used. Pass `null` to show no indication

triStateToggleable

@Composable fun Modifier.triStateToggleable(
    state: ToggleableState, 
    enabled: Boolean = true, 
    role: Role? = null, 
    interactionState: InteractionState = remember { InteractionState() }, 
    indication: Indication? = AmbientIndication.current(), 
    onClick: () -> Unit
): Modifier

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.

import androidx.compose.foundation.selection.triStateToggleable
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

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()
)

See Also

Modifier.toggleable

Parameters
state: