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.focus.onFocusChanged

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

val hasFocusBoolean

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

val isCapturedBoolean

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.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged

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

val isFocusedBoolean

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.focus.onFocusChanged

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.