> ## Content Index
> Fetch the complete content index at: https://developerinsider.co/llms.txt
> Use this file to discover other available public pages before exploring further.

# SwiftUI focusSection - UIFocusGuide Alternative for SwiftUI?
- URL: https://developerinsider.co/swiftui-focussection-uifocusguide-alternative-for-swiftui/
- Published: 2023-08-28T13:02:19.000Z
- Updated: 2023-08-28T15:35:53.000Z
- Description: Use the focusSection view modifier in SwiftUI as an alternative to the UIFocusGuide in UIKit to focus diagonally in tvOS apps by creating larger logical focus targets.
- Author: Vineet Choudhary
- Tags: SwiftUI, FocusSection, UIFocusGuide

For most of the tvOS apps, you need to move focus diagonally. This means that the focus navigation doesn't just move horizontally or vertically between elements but it also requires diagonal movement. In the UIKit application, we can achieve this using the `UIFocusGuide`. Now let's see how you can achieve this in SwiftUI using `focusSection` view modifier.

## 1\. The Problem

In the following image, there is a row of three buttons and a column of three buttons created using `VStack` and `HStack`. Here focus moves automatically between buttons in the same row or same column, but the focus engine doesn't move focus when the user swipes down from "Button 2" or "Button 3". But we did expect the focus to move to "Button 4".

![](https://cdn.developerinsider.co/images/ios/swiftui/focus-section/focus-section-problem-statement.webp)

Here is the SwiftUI code for the above design:

```swift
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 75) {
            HStack(spacing: 75) {
                Button("Button 1") {}
                Button("Button 2") {}
                Button("Button 3") {}
            }
            HStack(spacing: 75) {
                Button("Button 4") {}
            }
            HStack(spacing: 75) {
                Button("Button 5") {}
            }
        }
        .fixedSize()
        .padding()
    }
}

```

## 2\. Why it doesn't work?

This doesn't work by default because directional focus is based on the adjacency relationships. When swiping down to move focus, the focus will only move if there is something adjacent and focusable in that direction. Since there is no focusable view adjacent to "Button 2" or "Button 3" on the down, the "Button 4" on the far left is unreachable.

![](https://cdn.developerinsider.co/images/ios/swiftui/focus-section/focus-section-no-focus-element.webp)

## 3\. The Solution (Add focusSection)

To make "Button 4" focusable from "Button 2" or "Button 3", you need to extend the "Button 4" focusable area. This way it becomes adjacent to the "Button 2" or "Button 3". To make "Button 4" adjacent you need to add a `Spacer` to `HStack` that contains the "Button 4".

```swift
HStack(spacing: 75) {
    Button("Button 4") {}
    Spacer()
}

```

Now, to create a larger logical focus target around "Button 4" use the `focusSection` view modifier to the `HStack`.

```swift
HStack(spacing: 75) {
    Button("Button 4") {}
    Spacer()
}
.focusSection()

```

With this change, the complete `HStack` view becomes capable of accepting focus if it contains any focusable subviews.

![](https://cdn.developerinsider.co/images/ios/swiftui/focus-section/focus-section-neeed-focus-section.webp)

Now if you run the app, you can move focus from "Button 2" or "Button 3" to "Button 4".

![](https://cdn.developerinsider.co/images/ios/swiftui/focus-section/focus-section-create-focus-section.webp)

Here is the complete code:

```swift
struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 75) {
            HStack(spacing: 75) {
                Button("Button 1") {}
                Button("Button 2") {}
                Button("Button 3") {}
            }
            HStack(spacing: 75) {
                Button("Button 4") {}
                Spacer()
            }
            .focusSection()
            HStack(spacing: 75) {
                Button("Button 5") {}
            }
        }
        .fixedSize()
        .padding()
    }
}

```

Here is the demo video: