# toggleable

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/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( value: 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?, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events | 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/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)( value: 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?, onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Configure component to make it toggleable via input and accessibility events. | Cmn |

## Functions

### Modifier.toggleable

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/Toggleable.kt+function:toggleable) Added in [1.9.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.9.0)

```
fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onValueChange: (Boolean) -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events

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).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` 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 toggleable 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 toggleable, 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.selection.toggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
// content that you want to make toggleable
Text(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether Toggleable is on or off |
| `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/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` will handle input events and appear enabled for semantics purposes |
| `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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this toggleable is pressed. If `null`, an internal `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` will be created if needed. |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when toggleable is clicked, therefore the change of the state in requested. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` | if you require support for an indeterminate state. |

### Modifier.toggleable

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/Toggleable.kt+function:toggleable) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.0.0)

```
fun Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource?,
    indication: Indication?,
    enabled: Boolean = true,
    role: Role? = null,
    onValueChange: (Boolean) -> Unit
): Modifier
```

Configure component to make it toggleable via input and accessibility events.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` is `null`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` 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).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` only when needed. This reduces the performance cost of toggleable during composition, as creating the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/package-summary#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` 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 toggleable, 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).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` 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).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` 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).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` instead of `null`, as this cannot be lazily created inside toggleable.

```kotlin
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var checked by remember { mutableStateOf(false) }
// content that you want to make toggleable
Text(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
    text = checked.toString(),
)
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | whether Toggleable is on or off |
| `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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` when this toggleable 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 modified element is pressed. Be default, indication from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#LocalIndication()` will be used. Pass `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/toggleable.modifier#(androidx.compose.ui.Modifier).toggleable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.foundation.Indication,kotlin.Boolean,androidx.compose.ui.semantics.Role,kotlin.Function1)` will handle input events and appear enabled for semantics purposes |
| `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 |
| `onValueChange: (https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | callback to be invoked when toggleable is clicked, therefore the change of the state in requested. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/selection/triStateToggleable.modifier#(androidx.compose.ui.Modifier).triStateToggleable(androidx.compose.ui.state.ToggleableState,kotlin.Boolean,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` | if you require support for an indeterminate state. |