Keyboard Toolbar Padding iOS26

When I create a SwiftUI toolbar item with placement of .keyboard on iOS 26, the item appears directly on top of and in contact with the keyboard. This does not look good visually nor does it match the behavior seen in Apple's apps, such as Reminders. Adding padding to the contents of the toolbar item only expands the size of the item but does not separate the capsule background of the item from the keyboard. How can I add vertical padding or spacing to separate the toolbar item capsule from the keyboard?

Answered by DTS Engineer in 914162022

Hello all,

Please try using the recommendations above. I was able to achieve a button in the expected location using safeAreaBar(edge:alignment:spacing:content:) with the following code:

struct ContentView: View {
    @State private var text = ""
    @FocusState private var focused: Bool

    var body: some View {
        TextField("", text: $text)
            .focused($focused)
            .frame(maxHeight: .infinity, alignment: .top)
            .safeAreaBar(edge: .bottom) {
                Button("Add", systemImage: "plus") {}
                    .labelStyle(.iconOnly)
                    .buttonStyle(.borderedProminent)
                    .buttonBorderShape(.circle)
                    .controlSize(.large)
                    .padding(.bottom, 16)
            }
            .onAppear { focused = true }
    }
}

Take a look:

I hope this helps!

 Travis

I can’t comment on how Reminders implements this feature, but could you share how you arrived at the conclusion that it’s a keyboard ToolbarItemPlacement and not a custom component?

A different approach might be to use overlay instead that hides and shows based on the keyboard’s appearance?

I assumed it might be a toolbar with keyboard placement based purely on the similarity of the resulting control. The keyboard toolbar I get looks very similar to what I see in Reminders, but with different spacing between it and the keyboard.

A custom component is definitely a viable option - I just assumed the keyboard toolbar might be the preferred approach.

Perhaps another way of asking my question: is it expected for a toolbar with keyboard placement to "touch" the keyboard but have rounded edges in iOS 26? It looks very odd to my eye, hence my assumption that I'm missing some way to customize the padding.

Did you find a solution to this? I’m having the same issue. In Notes, for instance, keyboard toolbar buttons have a nice gap between the keyboard and the toolbar. I can’t duplicate this in SwiftUI.

I wish we had access to that component that's used above keyboard in Safari or Notes.

Here is a simple way to reproduce the issue:


struct KeyboardToolbarItem: View {
  @State var text: String = "foobar"
  
  var body: some View {
    Form {
      TextField("Foo", text: $text)
        .toolbar {
          ToolbarItem(placement: .keyboard) {
            Button {
              
            } label: {
              Image(systemName: "chevron.down")
            }
          }
        }
    }
  }
}

#Preview {
  KeyboardToolbarItem()
}

One would expect there to be some padding at the bottom of the button.

This is on Xcode 26.1 Beta 3 & iOS 26.1 beta 4

@wohclams try using safeAreaBar(edge:alignment:spacing:content:) and display the context when the textfield is focused

I’d like to use this thread to discuss related issue.

When focus, there is a wired padding when using ToolbarItemGroup(placement: .keyboard)

Here is my code:

struct ContentView: View {
    @State private var name = ""
    @FocusState private var focused: Bool

    var body: some View {
        VStack {
            TextField("輸入名稱", text: $name)
                .textFieldStyle(.roundedBorder)
                .padding()
                .focused($focused)
            
            Spacer()
        }
.background(Color(UIColor.systemGroupedBackground))
        .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
                Spacer()
                Button("完成") { focused = false }
            }
        }
    }
}

May I ask if there have been any relevant developments so far? In the official .keyboard design, no padding is set, which is quite peculiar. From a professional perspective, this design clearly contradicts the Human Interface Guidelines (HIG) and should be regarded as a Bug. Here, we hope that the official can fix this issue as soon as possible.

Has anyone found a solution? maybe some example code to achieve the desired design with a custom element?

@joshuarr

If you're reporting a bug, or filing an enhancement request, do so using Feedback Assistant.
Once you file the request, please post the FB number here.

If you're not familiar with how to file enhancement requests, take a look at
Bug Reporting: How and Why?

As of June 2026, I'm still able to reproduce this issue. I filed a bug using Feedback Assistant. The Feedback ID is FB22938104.

Any update on this issue?

Hello all,

Please try using the recommendations above. I was able to achieve a button in the expected location using safeAreaBar(edge:alignment:spacing:content:) with the following code:

struct ContentView: View {
    @State private var text = ""
    @FocusState private var focused: Bool

    var body: some View {
        TextField("", text: $text)
            .focused($focused)
            .frame(maxHeight: .infinity, alignment: .top)
            .safeAreaBar(edge: .bottom) {
                Button("Add", systemImage: "plus") {}
                    .labelStyle(.iconOnly)
                    .buttonStyle(.borderedProminent)
                    .buttonBorderShape(.circle)
                    .controlSize(.large)
                    .padding(.bottom, 16)
            }
            .onAppear { focused = true }
    }
}

Take a look:

I hope this helps!

 Travis

@DTS Engineer That is a workaround that might be enough for some, but I would still want to see the actual SwiftUI toolbar API with placement .keyboard to work correctly.

The toolbar API includes the liquid glass style toolbar buttons and makes it easy to group related buttons in shared button capsules.

I reported this issue well over a year ago in August 2025 (FB19279023) and it still hasn't been fixed.

Hello @Weuler,

That is valid feedback.

I just checked on your report FB19279023 – the issue with .keyboard toolbar spacing has not been forgotten. We are tracking it closely. I made sure to relate all these reports together so the team is aware of the impact.

They have not shared any workaround with me at the moment, if theres any further information I can share – I will try to update this thread accordingly.

I hope this information is helpful.

 Travis