# onFocusChanged

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)(onFocusChanged: (https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Add this modifier to a component to observe focus state events. | Cmn |

## Functions

### Modifier.onFocusChanged

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/focus/FocusChangedModifier.kt+function:onFocusChanged) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

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

Add this modifier to a component to observe focus state events. `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)` is invoked when the focus state changes. The `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)` modifier listens to the state of the first `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` following this modifier.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color.Companion.Black
import androidx.compose.ui.graphics.Color.Companion.Green
import androidx.compose.ui.unit.dp

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()
)
```

Note: If you want to be notified every time the internal focus state is written to (even if it hasn't changed), use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusEvent.modifier#(androidx.compose.ui.Modifier).onFocusEvent(kotlin.Function1)` instead.