FocusProperties

Properties that are applied to focusTarget that is the first child of the FocusPropertiesModifierNode that sets these properties.

See also
focusProperties

Summary

Public properties
Boolean

When set to false, indicates that the focusTarget that this is applied to can no longer take focus.
Cmn
open FocusRequester

A custom item to be used when the user moves focus "down".
Cmn
open FocusRequester

A custom item to be used when the user requests a focus moves to the "right" in LTR mode and "left" in RTL mode.
Cmn
open (FocusDirection) -> FocusRequester

A custom item to be used when the user requests focus to move focus in (FocusDirection.Enter).
Cmn
open (FocusDirection) -> FocusRequester

A custom item to be used when the user requests focus to move out (FocusDirection.Exit).
Cmn
open FocusRequester

A custom item to be used when the user requests a focus moves to the "left" item.
Cmn
open FocusRequester

A custom item to be used when the user requests the focus to move to the "next" item.
Cmn
open FocusEnterExitScope.() -> Unit

A custom item to be used when the user requests focus to move focus in (FocusDirection.Enter).
Cmn
open FocusEnterExitScope.() -> Unit

A custom item to be used when the user requests focus to move out (FocusDirection.Exit).
Cmn
open FocusRequester

A custom item to be used when the user requests the focus to move to the "previous" item.
Cmn
open FocusRequester

A custom item to be used when the user requests a focus moves to the "right" item.
Cmn
open FocusRequester

A custom item to be used when the user requests a focus moves to the "left" in LTR mode and "right" in RTL mode.
Cmn
open FocusRequester

A custom item to be used when the user moves focus "up".
Cmn

Public properties

canFocus

Cmn
Added in 1.1.0
var canFocus: Boolean

When set to false, indicates that the focusTarget that this is applied to can no longer take focus. If the focusTarget is currently focused, setting this property to false will end up clearing focus.

down

Cmn
Added in 1.2.0
open var down: FocusRequester

A custom item to be used when the user moves focus "down".

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

end

Cmn
Added in 1.2.0
open var end: FocusRequester

A custom item to be used when the user requests a focus moves to the "right" in LTR mode and "left" in RTL mode.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

enter

Cmn
Added in 1.3.0
Deprecated in 1.8.0-alpha07
@ExperimentalComposeUiApi
open var enter: (FocusDirection) -> FocusRequester

A custom item to be used when the user requests focus to move focus in (FocusDirection.Enter). An automatic Enter" can be triggered when we move focus to a focus group that is not itself focusable. In this case, users can use the the focus direction that triggered the move in to determine the next item to be focused on.

When you set the enter property, provide a lambda that takes the FocusDirection that triggered the enter as an input, and provides a FocusRequester as an output. You can return a custom destination by providing a FocusRequester attached to that destination, a Cancel to cancel the focus enter or Default to use the default focus enter behavior.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

// If the row is focused, performing a moveFocus(Enter) will move focus to item2.
val item2 = remember { FocusRequester() }
Row(Modifier.focusProperties { onEnter = { item2.requestFocus() } }.focusable()) {
    Box(Modifier.focusable())
    Box(Modifier.focusRequester(item2).focusable())
    Box(Modifier.focusable())
}

exit

Cmn
Added in 1.3.0
Deprecated in 1.8.0-alpha07
@ExperimentalComposeUiApi
open var exit: (FocusDirection) -> FocusRequester

A custom item to be used when the user requests focus to move out (FocusDirection.Exit). An automatic Exit can be triggered when we move focus outside the edge of a parent. In this case, users can use the focus direction that triggered the move out to determine the next focus destination.

When you set the exit property, provide a lambda that takes the FocusDirection that triggered the exit as an input, and provides a FocusRequester as an output. You can return a custom destination by providing a FocusRequester attached to that destination, a Cancel to cancel the focus exit or Default to use the default focus exit behavior.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

// If one of the boxes in Row1 is focused, performing a moveFocus(Exit)
// will move focus to the specified next item instead of moving focus to row1.
val nextItem = remember { FocusRequester() }
Column {
    Row(Modifier.focusProperties { onExit = { nextItem.requestFocus() } }.focusable()) {
        Box(Modifier.focusable())
        Box(Modifier.focusable())
        Box(Modifier.focusable())
    }
    Row(Modifier.focusable()) {
        Box(Modifier.focusable())
        Box(Modifier.focusRequester(nextItem).focusable())
    }
}

left

Cmn
Added in 1.2.0
open var left: FocusRequester

A custom item to be used when the user requests a focus moves to the "left" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

next

Cmn
Added in 1.2.0
open var next: FocusRequester

A custom item to be used when the user requests the focus to move to the "next" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

onEnter

Cmn
Added in 1.8.0-alpha07
open var onEnter: FocusEnterExitScope.() -> Unit

A custom item to be used when the user requests focus to move focus in (FocusDirection.Enter). An automatic Enter" can be triggered when we move focus to a focus group that is not itself focusable. In this case, users can use the the focus direction that triggered the move in to determine the next item to be focused on.

When you set the onEnter property, provide a lambda with the FocusEnterExitScope scope, having the FocusEnterExitScope.requestedFocusDirection that triggered the enter as an input. If redirection is required, use FocusRequester.requestFocus and if the focus change should be canceled, use FocusEnterExitScope.cancelFocus.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

// If the row is focused, performing a moveFocus(Enter) will move focus to item2.
val item2 = remember { FocusRequester() }
Row(Modifier.focusProperties { onEnter = { item2.requestFocus() } }.focusable()) {
    Box(Modifier.focusable())
    Box(Modifier.focusRequester(item2).focusable())
    Box(Modifier.focusable())
}

onExit

Cmn
Added in 1.8.0-alpha07
open var onExit: FocusEnterExitScope.() -> Unit

A custom item to be used when the user requests focus to move out (FocusDirection.Exit). An automatic Exit can be triggered when we move focus outside the edge of a parent. In this case, users can use the focus direction that triggered the move out to determine the next focus destination.

When you set the onExit property, provide a lambda with the FocusEnterExitScope scope, having the FocusEnterExitScope.requestedFocusDirection that triggered the exit as an input. If redirection is required, use FocusRequester.requestFocus and if the focus change should be canceled, use FocusEnterExitScope.cancelFocus.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

// If one of the boxes in Row1 is focused, performing a moveFocus(Exit)
// will move focus to the specified next item instead of moving focus to row1.
val nextItem = remember { FocusRequester() }
Column {
    Row(Modifier.focusProperties { onExit = { nextItem.requestFocus() } }.focusable()) {
        Box(Modifier.focusable())
        Box(Modifier.focusable())
        Box(Modifier.focusable())
    }
    Row(Modifier.focusable()) {
        Box(Modifier.focusable())
        Box(Modifier.focusRequester(nextItem).focusable())
    }
}

previous

Cmn
Added in 1.2.0
open var previous: FocusRequester

A custom item to be used when the user requests the focus to move to the "previous" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

right

Cmn
Added in 1.2.0
open var right: FocusRequester

A custom item to be used when the user requests a focus moves to the "right" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

start

Cmn
Added in 1.2.0
open var start: FocusRequester

A custom item to be used when the user requests a focus moves to the "left" in LTR mode and "right" in RTL mode.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}

up

Cmn
Added in 1.2.0
open var up: FocusRequester

A custom item to be used when the user moves focus "up".

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier.focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier.focusRequester(item3).focusProperties {
                next = item4
                right = item4
                up = item1
                previous = item2
            }
        )
        Box(
            Modifier.focusRequester(item4).focusProperties {
                next = item1
                left = item3
                up = item2
                previous = item3
            }
        )
    }
}