selectable

Modifier in Compose Foundation

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: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha01")
}

Overloads

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

Parameters

name	description
selected	whether or not this item is selected in a mutually exclusion set
enabled	whether or not this [selectable] will handle input events and appear enabled from a semantics perspective
role	the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick	callback 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

name	description
selected	whether 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.
indication	indication 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
enabled	whether or not this [selectable] will handle input events and appear enabled from a semantics perspective
role	the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick	callback to invoke when this item is clicked

Code Example

SelectableSample

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