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

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

Whether focus is captured or not.
Cmn
Boolean

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.