When a user interacts with your app, they often do so by touching elements on their screen. However, this is not the only form of interaction. Other forms of interaction could include the following:

- A ChromeOS user might use the*arrow keys*on their physical keyboard to navigate the screen.
- Someone playing a game could use their attached*game controller*to navigate through the game's menu.
- A mobile app user might cycle through elements using the*on-screen keyboard*.

In these cases, it is important to track which component is active at any given point in time, which is what we call**focus**. Elements on the screen should be focused in a logical order. Jetpack Compose has a default way of handling focus that is correct in most cases. However, in some cases, you might need to modify this default behavior.

The following pages describe how to use focus in your app:

- [Change focus traversal order](https://developer.android.com/develop/ui/compose/touch-input/focus/change-focus-traversal-order): Explains how to change the default focus order, add focus groups, and disable focus of a composable.
- [Change focus behavior](https://developer.android.com/develop/ui/compose/touch-input/focus/change-focus-behavior): Describes how to request, capture, and release focus, and how to redirect focus upon entering a screen.
- [React to focus](https://developer.android.com/develop/ui/compose/touch-input/focus/react-to-focus): Explains how to react to focus changes, add visual cues to elements, and understand the focus state of an element.

## Default focus traversal order

Before we dive into the default behavior of the focus search, it's important to understand the concept of*level* in the hierarchy: generally speaking, we can say that two`Composables`are at the same level when they are siblings, meaning that they have the same parents. For instance, elements inside a`Column`are at the same level. Getting up a level means going from a child to its`Composable`parent, or, keeping the same example, going back from an item to a`Column`that contains it. Going down a level is the other way around, from the`Column`parent to the contained items. This concept can be applied to every`Composable`that can contain other`Composables`.
| **Note:** For information about manually controlling focus order, see[Control traversal order](https://developer.android.com/develop/ui/compose/accessibility/traversal).

UI navigation can happen in multiple ways, some of which most users will already know:

- TABs: one-dimensional navigation, going*forward* or*backward* . TAB navigation advances focus to the next or previous element in the hierarchy. By default, Compose follows the declaration of the`Composables`. One-directional navigation can be achieved through the`tab`key on a keyboard, or the Rotary Bezel on a watch, and this kind of focus search will visit each element on the screen.
- Arrow keys: two-dimensional navigation, going*left, right, up* , or*down*. Two-dimensional navigation can be achieved through a D-Pad on a TV or arrow keys on a keyboard, and its traversal order only visits elements at a given level. You can use the D-Pad center and Back button to go down and back up to a different level.

Take as an example the screenshot below, where you have four buttons, one below the other, and you want to cycle through them all in order of appearance. Jetpack Compose delivers this behavior out of the box: the toolkit lets you cycle through each composable in vertical order from top to bottom using the`tab`key, or move focus by pressing the*up* or*down*arrow.
![Screenshot of a list of buttons placed vertically one below the other in a small form factor.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_compact_screen.png)**Figure 1**. List of buttons displayed in a small form factor

When you switch to a different kind of layout, things change a bit. If your layout has more than one column, like the layout below, Jetpack Compose lets you navigate through them without having to add any code. If you press the`tab`key, Jetpack Compose automatically highlights the items in order of declaration, from First to Fourth. Using arrow keys on your keyboard makes the selection follow the desired direction in 2D space.

<br />

```kotlin
Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L82-L91
```

<br />

The`Composables`are declared in two`Rows`, and the focus elements are declared in order, from first to fourth. When you press the`tab`key, this produces the following focus order:
![Screenshot of a list of buttons placed in two columns side by side in a bigger form factor.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_horizontal_navigation.gif)**Figure 2**. List of buttons placed in two columns side by side in a bigger form factor

In the snippet below, you declare the items in`Columns`rather than in`Rows`:

<br />

```kotlin
Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/touchinput/focus/FocusSnippets.kt#L101-L110
```

<br />

This layout traverses the items vertically, from top to bottom, from the start of the screen towards the end:
![Screenshot of a list of buttons placed in two columns side by side in a bigger form factor.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_vertical_navigation.gif)**Figure 3**. List of buttons placed in two columns side by side in a bigger form factor

The previous two samples, while differing in one-directional navigation, provide the same experience when it comes to two-dimensional navigation. This is usually because the items on the screen have the same geographic placement in both examples. Navigating right from the first`Column`moves the focus to the second, and navigating down from the first`Row`moves the focus to the one below it.
| **Note:** Focus properties are a special case, in which the parents always win in case of collisions or duplicates.This is something to keep in mind when working with focus.

## Recommended for you

- Note: link text is displayed when JavaScript is off
- [Change focus behavior](https://developer.android.com/develop/ui/compose/touch-input/focus/change-focus-behavior)
- [ConstraintLayout in Compose](https://developer.android.com/develop/ui/compose/layouts/constraintlayout)
- [Flow layouts in Compose](https://developer.android.com/develop/ui/compose/layouts/flow)