{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

SelectableKt

public final class SelectableKt


Summary

Public methods

static final @NonNull Modifier
selectable(
    @NonNull Modifier receiver,
    boolean selected,
    boolean enabled,
    Role role,
    @NonNull Function0<Unit> 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.

static final @NonNull Modifier
selectable(
    @NonNull Modifier receiver,
    boolean selected,
    @NonNull MutableInteractionSource interactionSource,
    Indication indication,
    boolean enabled,
    Role role,
    @NonNull Function0<Unit> 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.

Public methods

selectable

public static final @NonNull Modifier selectable(
    @NonNull Modifier receiver,
    boolean selected,
    boolean enabled,
    Role role,
    @NonNull Function0<Unit> 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, default indication from LocalIndication will be used. To specify MutableInteractionSource or Indication, use another overload.

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
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
boolean selected

whether or not this item is selected in a mutually exclusion set

boolean enabled

whether or not this selectable will handle input events and appear enabled from a semantics perspective

Role role

the type of user interface element. Accessibility services might use this to describe the element or do customizations

@NonNull Function0<Unit> onClick

callback to invoke when this item is clicked

selectable

public static final @NonNull Modifier selectable(
    @NonNull Modifier receiver,
    boolean selected,
    @NonNull MutableInteractionSource interactionSource,
    Indication indication,
    boolean enabled,
    Role role,
    @NonNull Function0<Unit> 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 requires both MutableInteractionSource and Indication to work properly. Use another overload if you don't need these parameters.

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
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
boolean selected

whether or not this item is selected in a mutually exclusion set

@NonNull MutableInteractionSource interactionSource

MutableInteractionSource that will be used to emit press events when this selectable is being pressed.

Indication 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

boolean enabled

whether or not this selectable will handle input events and appear enabled from a semantics perspective

Role role

the type of user interface element. Accessibility services might use this to describe the element or do customizations

@NonNull Function0<Unit> onClick

callback to invoke when this item is clicked