FocusState

Added in 1.0.0

Cmn
```
interface FocusState
```

The focus state of a FocusTargetNode. Use onFocusChanged or onFocusEvent modifiers to access FocusState.

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
`Boolean`	`hasFocus` Whether the focus modifier associated with this `FocusState` has a child that is focused.	Cmn
`Boolean`	`isCaptured` Whether focus is captured or not.	Cmn
`Boolean`	`isFocused` Whether the component is focused or not.	Cmn

Public properties

hasFocus

Cmn

Added in 1.0.0

val hasFocus: Boolean

Whether the focus modifier associated with this FocusState has a child that is focused.

Returns
`Boolean`	true if a child is focused, false otherwise.

isCaptured

Cmn

Added in 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 focusRequester.captureFocus() and free focus by calling focusRequester.freeFocus().

import androidx.compose.foundation.border
import androidx.compose.material.Text
import androidx.compose.material.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
`Boolean`	true if focus is captured, false otherwise.

isFocused

Cmn

Added in 1.0.0

val isFocused: Boolean

Whether the component is focused or not.

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
`Boolean`	true if the component is focused, false otherwise.