---
title: "StyleStateKey"
description: "The key to a [StyleState] value. A [StyleState] is a map from [StyleStateKey] to the current
value of the style state and the current value can be retrieved from a [StyleState] using array
index syntax or calling [StyleState.get] directly.

A [StyleStateKey] can be used to create a custom value that can be used in a [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, [StyleStateKey.Pressed], [StyleStateKey.Hovered], [StyleStateKey.Toggle],
[StyleStateKey.Enabled], and [StyleStateKey.Selected]. The [StyleState] provides helper
properties for these states, [StyleState.isPressed], [StyleState.isHovered], etc.

It is recommended that any new [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 [StyleState] to allow a style to more easily access the state. For example, if a
[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 [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`."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalFoundationStyleApi
open class StyleStateKey<T>(internal val defaultValue: T)
```


The key to a `StyleState` value. A `StyleState` is a map from `StyleStateKey` to the current
value of the style state and the current value can be retrieved from a `StyleState` using array
index syntax or calling `StyleState.get` directly.

A `StyleStateKey` can be used to create a custom value that can be used in a `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, `StyleStateKey.Pressed`, `StyleStateKey.Hovered`, `StyleStateKey.Toggle`,
`StyleStateKey.Enabled`, and `StyleStateKey.Selected`. The `StyleState` provides helper
properties for these states, `StyleState.isPressed`, `StyleState.isHovered`, etc.

It is recommended that any new `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 `StyleState` to allow a style to more easily access the state. For example, if a
`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 `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`.


## Companion Object

#### Properties

<div class='sourceset sourceset-common'>Common</div>


```kotlin
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



<div class='sourceset sourceset-common'>Common</div>


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


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



<div class='sourceset sourceset-common'>Common</div>


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


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



<div class='sourceset sourceset-common'>Common</div>


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


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



<div class='sourceset sourceset-common'>Common</div>


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


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



<div class='sourceset sourceset-common'>Common</div>


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


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





## Code Examples

### StyleStateKeySample
```kotlin
@Composable
fun StyleStateKeySample() {
    // Create a new StyleStateKey
    val playingStateKey = StyleStateKey(false)
    // Introduce an extension function to read the style state
    fun StyleScope.playerPlaying(value: Style) {
        state(playingStateKey, value) { key, state -> state[key] }
    }
    // Using the extension function to change the border color to green while playing
    val style = Style {
        borderColor(Color.Gray)
        playerPlaying { borderColor(Color.Green) }
    }
    // Using the style in a composable that sets the state.
    MediaPlayer(url = "https://example.com/media/video", style = style)
}
```