---
title: "selectable"
description: "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."
type: "modifier"
---
Compose Modifier
Common
> **Deprecated** Replaced with new overload that only supports IndicationNodeFactory instances inside LocalIndication, and does not use composed
```kotlin
fun Modifier.selectable(
selected: Boolean,
enabled: Boolean = true,
role: Role? = null,
onClick: () -> Unit,
) =
composed(
inspectorInfo =
debugInspectorInfo {
name = "selectable"
properties["selected"] = selected
properties["enabled"] = enabled
properties["role"] = role
properties["onClick"] = onClick
}
) {
val localIndication = LocalIndication.current
val interactionSource =
if (localIndication is IndicationNodeFactory) {
null
} else {
remember { MutableInteractionSource() }
}
Modifier.selectable(
selected = selected,
interactionSource = interactionSource,
indication = localIndication,
enabled = enabled,
role = role,
onClick = onClick,
)
}
```
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.
#### Parameters
| | |
| --- | --- |
| 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 |
Common
```kotlin
fun Modifier.selectable(
selected: Boolean,
enabled: Boolean = true,
role: Role? = null,
interactionSource: MutableInteractionSource? = null,
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. 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 overload will use the `Indication` from `LocalIndication`. Use the other overload to
explicitly provide an `Indication` instance. Note that this overload only supports
`IndicationNodeFactory` instances provided through `LocalIndication` - it is strongly recommended
to migrate to `IndicationNodeFactory`, but you can use the other overload if you still need to
support `Indication` instances that are not `IndicationNodeFactory`.
If `interactionSource` is `null`, an internal `MutableInteractionSource` will be lazily created
only when needed. This reduces the performance cost of selectable during composition, as creating
the `indication` can be delayed until there is an incoming
`androidx.compose.foundation.interaction.Interaction`. If you are only passing a remembered
`MutableInteractionSource` and you are never using it outside of selectable, it is recommended to
instead provide `null` to enable lazy creation. If you need the `Indication` to be created
eagerly, provide a remembered `MutableInteractionSource`.
#### Parameters
| | |
| --- | --- |
| 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 |
| 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. |
| onClick | callback to invoke when this item is clicked |
Common
```kotlin
fun Modifier.selectable(
selected: Boolean,
interactionSource: MutableInteractionSource?,
indication: Indication?,
enabled: Boolean = true,
role: Role? = null,
onClick: () -> Unit,
) =
clickableWithIndicationIfNeeded(
interactionSource = interactionSource,
indication = indication,
) { intSource, indicationNodeFactory ->
SelectableElement(
selected = selected,
interactionSource = intSource,
indicationNodeFactory = indicationNodeFactory,
useLocalIndication = false,
enabled = enabled,
role = role,
onClick = onClick,
)
}
```
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`
If `interactionSource` is `null`, and `indication` is an `IndicationNodeFactory`, an internal
`MutableInteractionSource` will be lazily created along with the `indication` only when needed.
This reduces the performance cost of selectable during composition, as creating the `indication`
can be delayed until there is an incoming `androidx.compose.foundation.interaction.Interaction`.
If you are only passing a remembered `MutableInteractionSource` and you are never using it
outside of selectable, it is recommended to instead provide `null` to enable lazy creation. If
you need `indication` to be created eagerly, provide a remembered `MutableInteractionSource`.
If `indication` is _not_ an `IndicationNodeFactory`, and instead implements the deprecated
`Indication.rememberUpdatedInstance` method, you should explicitly pass a remembered
`MutableInteractionSource` as a parameter for `interactionSource` instead of `null`, as this
cannot be lazily created inside selectable.
#### Parameters
| | |
| --- | --- |
| 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 Examples
### SelectableSample
```kotlin
@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 })
)
}
}
}
}
```