kotlin.Any
   ↳ androidx.compose.foundation.style.StyleState
     ↳ androidx.compose.foundation.style.MutableStyleState

The state a style that can be updated to reflect the current state of a component. This value should be created in a component and updated to select the style parameter to be set for the component.

A component that uses an interaction source can create a MutableStyleState that observes the interactions emitted to the interaction source.

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.MutableStyleState
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
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,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = remember { MutableStyleState(interactionSource) }
    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) }
    },
)
See also
pressed
focused
hovered

Summary

Public constructors
Cmn

Public functions
open operator T
<T : Any?> get(key: StyleStateKey<T>)

Read the value of a style state key.
Cmn
Unit
<T : Any?> remove(key: StyleStateKey<T>)

Removes the StyleStateKey from the StyleState.
Cmn
operator Unit
<T : Any?> set(key: StyleStateKey<T>, value: T)

Set the value of the key in the StyleState.
Cmn

Public properties
open Boolean

isChecked is true when the stylable component is checked.
Cmn
open Boolean

isEnabled is true when the stylable component is enabled.
Cmn
open Boolean

isFocused is true when the stylable component is focused.
Cmn
open Boolean

isHovered is true when the stylable component is hovered.
Cmn
open Boolean

isPressed is true when the stylable component is pressed.
Cmn
open Boolean

isSelected is true when the stylable component is selected.
Cmn
open ToggleableState

triStateToggle is the state of a tri-state toggleable.
Cmn

Public constructors

MutableStyleState

Cmn 
@RememberInComposition
MutableStyleState(interactionSource: InteractionSource?)

Public functions

get

Cmn 
open operator fun <T : Any?> get(key: StyleStateKey<T>): T

Read the value of a style state key. 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 Style to customize the look of the component when it moves in an out of playing a value.

remove

Cmn 
fun <T : Any?> remove(key: StyleStateKey<T>): Unit

Removes the StyleStateKey from the StyleState.

A Style will read the StyleStateKey.defaultValue for the StyleStateKey when the key is not present in the StyleState.

Removing a key that is updated via an InteractionSource will no longer observe the interaction source.

Predefined style keys, such as StyleStateKey.Pressed and StyleStateKey.Hovered, cannot be removed from the set of keys and this will throw if removed.

set

Cmn 
operator fun <T : Any?> set(key: StyleStateKey<T>, value: T): Unit

Set the value of the key in the StyleState.

Public properties

isChecked

Cmn 
open var isChecked: Boolean

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 toggleable set isChecked to the value of the checked parameter.

The StyleScope.checked function reads this state and will only set the properties in its block parameter when isChecked is true.

isEnabled

Cmn 
open var isEnabled: Boolean

isEnabled is true when the stylable component is enabled.

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

The StyleState.isEnabled function will only execute its block parameter when this isEnabled is true.

androidx.compose.foundation.text.BasicTextField, for example, sets this value to the value of the enabled parameter.

isFocused

Cmn 
open var isFocused: Boolean

isFocused is true when the stylable component is focused.

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

The StyleScope.focused function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, focusable will send FocusInteraction.Focus and FocusInteraction.Unfocus interactions when the component receives focus or loses focus. When the style state is watching an InteractionSource this state will be updated when the focus interactions are received in the InteractionSource.

isHovered

Cmn 
open var isHovered: Boolean

isHovered is true when the stylable component is hovered.

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

The StyleScope.hovered function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, hoverable will send HoverInteraction.Enter and HoverInteraction.Exit interactions when a mouse enters or exits the component. When the style state is watching an InteractionSource this state will be updated when the focus interactions are received in the InteractionSource.

isPressed

Cmn 
open var isPressed: Boolean

isPressed is true when the stylable component is pressed.

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

The StyleScope.pressed function reads this state and will only set the properties set in its block parameter when isPressed is true.

For example, clickable will send PressInteraction.Press and PressInteraction.Release interactions when the component is pressed and released. When the style state is watching an InteractionSource it will update this state.

isSelected

Cmn 
open var isSelected: Boolean

isSelected is true when the stylable component is selected.

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

The StyleScope.selected function reads this state and will only set the properties in its block parameter when isSelected is true.

triStateToggle

Cmn 
open var triStateToggle: ToggleableState

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 triStateToggleable will set triStateToggle parameter to the value of the checked parameter.

The StyleScope.checked function reads this state and will only set the properties in its block parameter when triStateToggle is ToggleableState.On.

The StyleScope.triStateToggleIndeterminate function reads this state and will only set the properties in its block parameter when the triStateToggle is ToggleableState.Indeterminate.