New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

selectable

Common

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. To ensure correct accessibility behavior, make sure to pass [Modifier.selectableGroup] modifier into the RadioGroup or the row.

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

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 selectable 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.selectable(
    selected: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    onClick: () -> Unit
)

Parameters

namedescription
selectedwhether or not this item is selected in a mutually exclusion set
enabledwhether or not this [selectable] will handle input events and appear enabled from a semantics perspective
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onClickcallback to invoke when this item is clicked

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

Parameters

namedescription
selectedwhether or not this item is selected in a mutually exclusion set
interactionSource[MutableInteractionSource] that will be used to dispatch PressInteraction.Press when this selectable is pressed. If null, an internal [MutableInteractionSource] will be created if needed.
indicationindication to be shown when the modified element is pressed. By default, the indication from [LocalIndication] will be used. Set to null to show no indication, or current value from [LocalIndication] to show theme default
enabledwhether or not this [selectable] will handle input events and appear enabled from a semantics perspective
rolethe type of user interface element. Accessibility services might use this to describe the element or do customizations
onClickcallback to invoke when this item is clicked

Code Example

SelectableSample

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