# FocusProperties

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

  ```
  interface FocusProperties
  ```

*** ** * ** ***

Properties that are applied to `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` that is the first child of the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusPropertiesModifierNode` that sets these properties.

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusProperties.modifier#(androidx.compose.ui.Modifier).focusProperties(kotlin.Function1)` |   |

## Summary

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#UnsetFocusRect()` Denotes that the bounds of the associated focus target should be used as the focus area. | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#canFocus()` When set to false, indicates that the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` that this is applied to can no longer take focus. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#down()` A custom item to be used when the user moves focus "down". | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#end()` 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 (https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalComposeUiApi https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#enter()` **The setter for this property is deprecated.** Use onEnter instead | Cmn |
| `open (https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection) -> https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalComposeUiApi https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#exit()` **The setter for this property is deprecated.** Use onExit instead | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#focusRect()` Sets the focus area for the associated focus target to which these `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties` are applied on. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#left()` A custom item to be used when the user requests a focus moves to the "left" item. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#next()` A custom item to be used when the user requests the focus to move to the "next" item. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#onEnter()` A custom item to be used when the user requests focus to move focus in (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Enter()`). | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#onExit()` A custom item to be used when the user requests focus to move out (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Exit()`). | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#previous()` A custom item to be used when the user requests the focus to move to the "previous" item. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#right()` A custom item to be used when the user requests a focus moves to the "right" item. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#start()` 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 https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#up()` A custom item to be used when the user moves focus "up". | Cmn |

## Public companion properties

### UnsetFocusRect

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

```
val UnsetFocusRect: Rect
```

Denotes that the bounds of the associated focus target should be used as the focus area.

## Public properties

### canFocus

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

```
var canFocus: Boolean
```

When set to false, indicates that the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` that this is applied to can no longer take focus. If the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/focusTarget.modifier#(androidx.compose.ui.Modifier).focusTarget()` is currently focused, setting this property to false will end up clearing focus.

### down

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

```
open var down: FocusRequester
```

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

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#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.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
@ExperimentalComposeUiApi
open var enter: (FocusDirection) -> FocusRequester
```

> [!CAUTION]
> **The setter for this property is deprecated.**   
> Use onEnter instead, use this instead:
>
> ```kotlin
> onEnter
> ```

A custom item to be used when the user requests focus to move focus in (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Enter()`). An automatic `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#enter()` property, provide a lambda that takes the FocusDirection that triggered the enter as an input, and provides a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` as an output. You can return a custom destination by providing a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` attached to that destination, a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#Cancel()` to cancel the focus enter or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#Default()` to use the default focus enter behavior.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.3.0)

```
@ExperimentalComposeUiApi
open var exit: (FocusDirection) -> FocusRequester
```

> [!CAUTION]
> **The setter for this property is deprecated.**   
> Use onExit instead, use this instead:
>
> ```kotlin
> onExit
> ```

A custom item to be used when the user requests focus to move out (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Exit()`). An automatic `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#exit()` property, provide a lambda that takes the FocusDirection that triggered the exit as an input, and provides a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` as an output. You can return a custom destination by providing a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester` attached to that destination, a `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#Cancel()` to cancel the focus exit or `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#Default()` to use the default focus exit behavior.

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

### focusRect

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

```
open var focusRect: Rect
```

Sets the focus area for the associated focus target to which these `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties` are applied on.

If you simply ignore and do not set this value, `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#UnsetFocusRect()` will be used. Or alternatively you can set this value to `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#UnsetFocusRect()` to prevent other `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties` nodes in the chain from customizing the focus area.

### left

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

```
open var left: FocusRequester
```

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

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#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.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.8.0)

```
open var onEnter: FocusEnterExitScope.() -> Unit
```

A custom item to be used when the user requests focus to move focus in (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Enter()`). An automatic `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#onEnter()` property, provide a lambda with the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope` scope, having the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope#requestedFocusDirection()` that triggered the enter as an input. If redirection is required, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#requestFocus(androidx.compose.ui.focus.FocusDirection)` and if the focus change should be canceled, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope#cancelFocusChange()`.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.8.0)

```
open var onExit: FocusEnterExitScope.() -> Unit
```

A custom item to be used when the user requests focus to move out (`https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#Exit()`). An automatic `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusDirection#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusProperties#onExit()` property, provide a lambda with the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope` scope, having the `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope#requestedFocusDirection()` that triggered the exit as an input. If redirection is required, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusRequester#requestFocus(androidx.compose.ui.focus.FocusDirection)` and if the focus change should be canceled, use `https://developer.android.com/reference/kotlin/androidx/compose/ui/focus/FocusEnterExitScope#cancelFocusChange()`.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#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.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.2.0)

```
open var right: FocusRequester
```

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

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#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.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.2.0)

```
open var up: FocusRequester
```

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

```kotlin
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
            }
        )
    }
}
```