# FocusState

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/FocusState.kt+class:androidx.compose.ui.focus.FocusState) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0) Common/All
- Cmn

  ```
  interface FocusState
  ```

*** ** * ** ***

The focus state of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusTargetNode`. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusChanged.modifier#(androidx.compose.ui.Modifier).onFocusChanged(kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/onFocusEvent.modifier#(androidx.compose.ui.Modifier).onFocusEvent(kotlin.Function1)` modifiers to access `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState`.

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

## Summary

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState#hasFocus()` Whether the focus modifier associated with this `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState` has a child that is focused, or is itself focused (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState#isFocused()`). | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState#isCaptured()` Whether focus is captured or not. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState#isFocused()` Whether the component is focused or not. | Cmn |

## Public properties

### hasFocus

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

```
val hasFocus: Boolean
```

Whether the focus modifier associated with this `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState` has a child that is focused, or is itself focused (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusState#isFocused()`).

| Returns |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | true if the component or any of its children are focused, false otherwise. |

### isCaptured

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

```
val isCaptured: Boolean
```

Whether focus is captured or not. A focusable component is in a captured state when it wants to hold onto focus. (Eg. when a text field has an invalid phone number). When we are in a captured state, clicking on other focusable items does not clear focus from the currently focused item.

You can capture focus by calling `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.focus.FocusRequesterModifierNode).captureFocus()` and free focus by calling `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/package-summary#(androidx.compose.ui.focus.FocusRequesterModifierNode).freeFocus()`.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color.Companion.Red
import androidx.compose.ui.graphics.Color.Companion.Transparent
import androidx.compose.ui.unit.dp

val focusRequester = remember { FocusRequester() }
var value by remember { mutableStateOf("apple") }
var borderColor by remember { mutableStateOf(Transparent) }
TextField(
    value = value,
    onValueChange = {
        value = it.apply {
            if (length > 5) focusRequester.captureFocus() else focusRequester.freeFocus()
        }
    },
    modifier =
        Modifier.border(2.dp, borderColor).focusRequester(focusRequester).onFocusChanged {
            borderColor = if (it.isCaptured) Red else Transparent
        },
)
```

| Returns |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | true if focus is captured, false otherwise. |

### isFocused

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

```
val isFocused: Boolean
```

Whether the component is focused or not.

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

| Returns |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | true if the component is focused, false otherwise. |