# StyleStateKey

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/style/StyleState.kt+class:androidx.compose.foundation.style.StyleStateKey) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/All
- Cmn

  ```
  @ExperimentalFoundationStyleApi
  open class StyleStateKey<T : Any?>
  ```

*** ** * ** ***

The key to a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` value. A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` is a map from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey` to the current value of the style state and the current value can be retrieved from a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` using array index syntax or calling `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#get(androidx.compose.foundation.style.StyleStateKey)` directly.

A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey` can be used to create a custom value that can be used in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` to provide properties based on the state of the value.

There are a set of predefined states that are expected to be commonly provided by elements that are styleable, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Pressed()`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Hovered()`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Toggle()`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Enabled()`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Selected()`. The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` provides helper properties for these states, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isHovered()`, etc.

It is recommended that any new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey` be a constant with at least the same accessibility as the component that uses it. It is also recommended to have a corresponding extension functions for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` to allow a style to more easily access the state. For example, if a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey` is added for a "playing" state, such as `var PlayingStateKey = styleStateKey(false)` then it is recommended for a `val StyleState.isPlaying = this.get(PlayingStateKey)` to be declared.

It is also recommended that an extension function for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` also be created that allows the style`fun StyleScope.playing(block: StyleScope.() -> Unit)` be declared that will only call `block` when the `StyleState.isPlaying` is `true`.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

// Create a new StyleStateKey
val playingStateKey = StyleStateKey(false)

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

// Using the style in a composable that sets the state.
MediaPlayer(
    url = "https://example.com/media/video",
    style = {
        borderColor(Color.Gray)

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)
```

## Summary

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Enabled()` The style state key for the enabled state of a style. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Focused()` The style state key for the focused state of a style. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Hovered()` The style state key for the hovered state of a style. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Pressed()` The style state key for the pressed state of a state. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Selected()` The style state key for the selected state of a style. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState>` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#Toggle()` The style state key for the hovered state of a style. | Cmn |

| ### Public constructors |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#StyleStateKey(kotlin.Any)(defaultValue: T)` | Cmn |

| ### Protected functions |
|---|---|---|
| `open suspend https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#processInteraction(androidx.compose.foundation.interaction.Interaction,androidx.compose.foundation.style.MutableStyleState)( interaction: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction, styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState )` Called when an interaction is received on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState#interactionSource()` when this key is included in the style state. | Cmn |

## Public companion properties

### Enabled

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Enabled: StyleStateKey<Boolean>
```

The style state key for the enabled state of a style.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |

### Focused

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Focused: StyleStateKey<Boolean>
```

The style state key for the focused state of a style.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` |   |

### Hovered

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Hovered: StyleStateKey<Boolean>
```

The style state key for the hovered state of a style.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/hoverable.modifier#(androidx.compose.ui.Modifier).hoverable(androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean)` |   |

### Pressed

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Pressed: StyleStateKey<Boolean>
```

The style state key for the pressed state of a state.

This state is `true` when the style component is pressed

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/clickable.modifier#(androidx.compose.ui.Modifier).clickable(kotlin.Boolean,kotlin.String,androidx.compose.ui.semantics.Role,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` |   |

### Selected

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Selected: StyleStateKey<Boolean>
```

The style state key for the selected state of a style.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |

### Toggle

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
val Toggle: StyleStateKey<ToggleableState>
```

The style state key for the hovered state of a style.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState` |   |

## Public constructors

### StyleStateKey

Cmn

```
<T : Any?> StyleStateKey(defaultValue: T)
```

## Protected functions

### processInteraction

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
protected open suspend fun processInteraction(
    interaction: Interaction,
    styleState: MutableStyleState
): Unit
```

Called when an interaction is received on `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState#interactionSource()` when this key is included in the style state.

If a composable function uses an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` to send notifications of interactions, this method can be overridden to update the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey#processInteraction(androidx.compose.foundation.interaction.Interaction,androidx.compose.foundation.style.MutableStyleState)` to reflect the state implied by the interactions.