WWDC24 deal: 30% off our Swift and SwiftUI books! Learn more ...WWDC24 deal:30% off our Swift and SwiftUI books >>
Quick Tip Icon
Quick Tip

Keyboard driven navigation with focusable() on iPad in SwiftUI

The recent updates to iOS 17 and iPadOS 17 have brought about exciting changes, one of which is the introduction of the focusable() modifier. This allows us to let users focus on views that are not focusable by default, significantly improving keyboard based interaction.

Screenshot showing a focused SwiftUI view.

Here's a simple example of how we can use the focusable() modifier in SwiftUI.

VStack {
    FirstView()
        .focusable()

    SecondView()
        .focusable()
}
Books by Natalia PanferovaBooks by Natalia Panferova
WWDC24: 30% off all books!
  • Swift Gems

    100+ tips to take your Swift code to the next level

  • Integrating SwiftUI into UIKit Apps

    A detailed guide on gradually adopting SwiftUI in UIKit projects

The offer is active until the 16th of June.

# Customize focus effect style

To customize the style of the focus effect we need to remove the default styling with focusEffectDisabled() and then apply our own.

To know that a view is focused we need to use the focused() modifier with a @FocusState to track and respond to changes.

struct ContentView: View {
    var body: some View {
        VStack {
            FirstViewWrapped()
                .focusEffectDisabled()

            SecondView()
                .focusable()
        }
    }
}

struct FirstViewWrapped: View {
    @FocusState var isFocused
        
    var body: some View {
        FirstView()

            .focusable()             // Enable focuses
            .focused($isFocused)     // Detect focuses
            
            .background {
                if isFocused {
                    Capsule()
                        .fill(.indigo)
                        .opacity(0.3)
                }
            }
    }
}

The order of the focusable() and focused() modifiers is important. The focused() modifier needs to be placed after the focusable() modifier.

Screenshot showing a focused SwiftUI view with custom background style.