Add gap to the keyboard toolbar
07:00 27 Sep 2025

Since iOS 26, the toolbar on the keyboard isn't against the keyboard, there's a small gap as seen here on Safari: enter image description here

But in my app it shows up like this, without the gap: enter image description here

Here's my code:

.toolbar {
    ToolbarItem(placement: .keyboard) {
        HStack {
            Button(action: {
                switch focusedField {(...)}
            }) {
                Image(systemName: "chevron.up")
                    .padding()
            }
            .disabled(focusedField == .firstField)
            
            Button(action: {
                switch focusedField {(...)}
            }) {
                Image(systemName: "chevron.down")
                    .padding()
            }
            .disabled(focusedField == .lastField)
            
            Spacer()
            
            Button {
                focusedField = nil
            } label: {
                Image(systemName: "checkmark")
                    .padding()
            }
        }
    }
}

I tried using an ToolbarItemGroup instead, several ToolbarItem without the HStack, adding padding to any component or spacing in a VStack but that mainly just made the toolbar itself thicker. Is there a built-in Swift toolbar for the keyboard or am I doing something wrong?

Edit: With Benzy Neez' suggestion below, this code:

.toolbar {
    ToolbarItem(placement: .keyboard) {
        HStack {
            // ... content as before
            Button("", systemImage: "checkmark") {
                isFocused = false
            }
            .padding(5)
        }
        .background(.bar.opacity(0.5), in: .capsule)
        .glassEffect()
        .shadow(color: .black.opacity(0.2), radius: 20, y: 10)
        .padding(.bottom, 20)
    }
    .sharedBackgroundVisibility(.hidden)
}

appears with the gap but without the glass effect (my app on the left, safari on the right): enter image description here

swift swiftui keyboard ios26 toolbaritems