# StyleState

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

  ```
  @ExperimentalFoundationStyleApi
  sealed class StyleState
  ```
Known direct subclasses [MutableStyleState](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` | The state a style that can be updated to reflect the current state of a component. |

*** ** * ** ***

The state a style can use to select property values depending on the state of the component is a style for.

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.disabled
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.size
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
import androidx.compose.ui.unit.dp

// Create a styleable clickable box
@Composable
fun ClickableStyleableBox(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style,
    enabled: Boolean = true,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource) { it.isEnabled = enabled }
    Box(
        modifier =
            modifier
                .clickable(interactionSource = interactionSource, onClick = onClick)
                .styleable(styleState, style)
    )
}

// Create a 150x150 green box that is clickable
ClickableStyleableBox(
    onClick = {},
    style = {
        background(Color.Green)
        size(150.dp)
        hovered { background(Color.Yellow) }
        pressed { background(Color.Red) }
        disabled { background(Color.Gray) }
    },
)
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).pressed(kotlin.Function0)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).focused(kotlin.Function0)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).hovered(kotlin.Function0)` |   |

## Summary

| ### Protected constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#StyleState()()` | Cmn |

| ### Public functions |
|---|---|---|
| `abstract operator T` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#get(androidx.compose.foundation.style.StyleStateKey)(key: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleStateKey<T>)` Read the value of a style state `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#get(androidx.compose.foundation.style.StyleStateKey)`. | Cmn |

| ### Public properties |
|---|---|---|
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isChecked()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isChecked()` is `true` when the stylable component is checked. | Cmn |
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isEnabled()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isEnabled()` is `true` when the stylable component is enabled. | Cmn |
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isFocused()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isFocused()` is `true` when the stylable component is focused. | Cmn |
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isHovered()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isHovered()` is `true` when the stylable component is hovered. | Cmn |
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` is `true` when the stylable component is pressed. | Cmn |
| `abstract https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isSelected()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isSelected()` is `true` when the stylable component is selected. | Cmn |
| `abstract https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` is the state of a tri-state toggleable. | Cmn |

## Protected constructors

### StyleState

Cmn

```
protected StyleState()
```

## Public functions

### get

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

```
abstract operator fun <T : Any?> get(key: StyleStateKey<T>): T
```

Read the value of a style state `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#get(androidx.compose.foundation.style.StyleStateKey)`. This overloads the index operator which allows reading the key using the array index syntax.

This allows components to define custom state that can be used in a style to control the look of a composable. For example, a video playing application can introduce a custom `PlayingStyleState<Boolean>` and set the value of this state. This state can then be in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` to customize the look of the component when it moves in an out of playing a value.

## Public properties

### isChecked

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

```
abstract val isChecked: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isChecked()` is `true` when the stylable component is checked.

Elements that are toggleable will set this property to `true` when they are checked.

For example, components that use `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)` set `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isChecked()` to the value of the `checked` parameter.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).checked(kotlin.Function0)` function reads this state and will only set the properties in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isChecked()` is `true`.

### isEnabled

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

```
abstract val isEnabled: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isEnabled()` is `true` when the stylable component is enabled.

Elements that can be enabled and disabled will set value when they are called.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isEnabled()` function will only execute its `block` parameter when this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isEnabled()` is true.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/BasicTextField.composable#BasicTextField(androidx.compose.foundation.text.input.TextFieldState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.text.input.InputTransformation,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.input.KeyboardActionHandler,androidx.compose.foundation.text.input.TextFieldLineLimits,kotlin.Function2,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,androidx.compose.foundation.text.input.OutputTransformation,androidx.compose.foundation.text.input.TextFieldDecorator,androidx.compose.foundation.ScrollState)`, for example, sets this value to the value of the `enabled` parameter.

### isFocused

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

```
abstract val isFocused: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isFocused()` is `true` when the stylable component is focused.

Elements that are focusable will set this state to `true` when are focused.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).focused(kotlin.Function0)` function reads this state and will only set the properties set in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` is true.

For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/focusable.modifier#(androidx.compose.ui.Modifier).focusable(kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource)` will send `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/FocusInteraction.Focus` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/FocusInteraction.Unfocus` interactions when the component receives focus or loses focus. When the style state is watching an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` this state will be updated when the focus interactions are received in the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource`.

### isHovered

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

```
abstract val isHovered: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isHovered()` is `true` when the stylable component is hovered.

Elements that are hoverable will set this state to `true` when they are hovered.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).hovered(kotlin.Function0)` function reads this state and will only set the properties set in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` is true.

For example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/hoverable.modifier#(androidx.compose.ui.Modifier).hoverable(androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean)` will send `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/HoverInteraction.Enter` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/HoverInteraction.Exit` interactions when a mouse enters or exits the component. When the style state is watching an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` this state will be updated when the focus interactions are received in the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource`.

### isPressed

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

```
abstract val isPressed: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` is `true` when the stylable component is pressed.

Elements that are pressable will set this state to `true` when they are pressed.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).pressed(kotlin.Function0)` function reads this state and will only set the properties set in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isPressed()` is `true`.

For example, `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)` will send `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Press` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/PressInteraction.Release` interactions when the component is pressed and released. When the style state is watching an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/InteractionSource` it will update this state.

### isSelected

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

```
abstract val isSelected: Boolean
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isSelected()` is `true` when the stylable component is selected.

Elements that are selectable will set this property to `true` when they are selected.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).selected(kotlin.Function0)` function reads this state and will only set the properties in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#isSelected()` is `true`.

### triStateToggle

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

```
abstract val triStateToggle: ToggleableState
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` is the state of a tri-state toggleable. A tri-state togglable is a component that can represent that the checked state is unspecified.

Elements that are selectable will set this property to `true` when is checked.

For example, components that use `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)` will set `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` parameter to the value of the `checked` parameter.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).checked(kotlin.Function0)` function reads this state and will only set the properties in its `block` parameter when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` is `https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState#On`.

The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/package-summary#(androidx.compose.foundation.style.StyleStateScope).triStateToggleIndeterminate(kotlin.Function0)` function reads this state and will only set the properties in its `block` parameter when the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState#triStateToggle()` is `https://developer.android.com/reference/kotlin/androidx/compose/ui/state/ToggleableState#Indeterminate`.