# selectable

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` 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. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)( selected: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role?, onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` 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. | Cmn |

## Functions

### Modifier.selectable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Selectable.kt+function:selectable) Added in [1.9.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.9.0)

```
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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectableGroup.modifier#(androidx.compose.ui.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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`

This overload will use the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()`. Use the other overload to explicitly provide an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instance. Note that this overload only supports `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory` instances provided through `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` - it is strongly recommended to migrate to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, but you can use the other overload if you still need to support `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` instances that are not `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` is `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created only when needed. This reduces the performance cost of selectable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/indication.modifier#(androidx.compose.ui.Modifier).indication(androidx.compose.foundation.interaction.InteractionSource,androidx.compose.foundation.Indication)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

```kotlin
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.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this item is selected in a mutually exclusion set |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` will handle input events and appear enabled from a semantics perspective |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch PressInteraction.Press when this selectable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to invoke when this item is clicked |

### Modifier.selectable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/selection/Selectable.kt+function:selectable) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.selectable(
    selected: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectableGroup.modifier#(androidx.compose.ui.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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be lazily created along with the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` only when needed. This reduces the performance cost of selectable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` can be delayed until there is an incoming `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`. If you are only passing a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` and you are never using it outside of selectable, it is recommended to instead provide `null` to enable lazy creation. If you need `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` to be created eagerly, provide a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource`.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` is *not* an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/IndicationNodeFactory`, and instead implements the deprecated `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication#rememberUpdatedInstance(androidx.compose.foundation.interaction.InteractionSource)` method, you should explicitly pass a remembered `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` as a parameter for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` instead of `null`, as this cannot be lazily created inside selectable.

```kotlin
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.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether or not this item is selected in a mutually exclusion set |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` that will be used to dispatch PressInteraction.Press when this selectable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `indication: https://developer.android.com/reference/kotlin/androidx/compose/foundation/Indication?` | indication to be shown when the modified element is pressed. By default, the indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Set to `null` to show no indication, or current value from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` to show theme default |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether or not this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/selectable.modifier#(androidx.compose.ui.Modifier).selectable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function0)` will handle input events and appear enabled from a semantics perspective |
| `role: https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/Role? = null` | the type of user interface element. Accessibility services might use this to describe the element or do customizations |
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to invoke when this item is clicked |