---
title: "onFocusChanged"
description: "Add this modifier to a component to observe focus state events. [onFocusChanged] is invoked when
the focus state changes. The [onFocusChanged] modifier listens to the state of the first
[focusTarget] following this modifier.


Note: If you want to be notified every time the internal focus state is written to (even if it
hasn't changed), use [onFocusEvent] instead."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.onFocusChanged(onFocusChanged: (FocusState) -> Unit): Modifier
```


Add this modifier to a component to observe focus state events. `onFocusChanged` is invoked when
the focus state changes. The `onFocusChanged` modifier listens to the state of the first
`focusTarget` following this modifier.


Note: If you want to be notified every time the internal focus state is written to (even if it
hasn't changed), use `onFocusEvent` instead.



## Code Examples
### FocusableSample
```kotlin
@Composable
fun FocusableSample() {
    var color by remember { mutableStateOf(Black) }
    Box(
        Modifier.border(2.dp, color)
            // The onFocusChanged should be added BEFORE the focusable that is being observed.
            .onFocusChanged { color = if (it.isFocused) Green else Black }
            .focusable()
    )
}
```