Programmatically align a toolbar on top of the iPhone keyboard

iOS development

iPhone keyboard

toolbar alignment

Swift programming

mobile app UI

Programmatically align a toolbar on top of the iPhone keyboard

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Adding a toolbar above the iPhone keyboard improves form usability by giving users quick actions such as Next, Done, or formatting commands. The easiest and most stable approach is to attach a UIToolbar as an input accessory view. For complex layouts, keyboard notifications can help keep additional UI elements aligned with keyboard movement.

Use `inputAccessoryView` for Text Fields and Text Views

For most cases, assign a toolbar directly to each input control.

swift

1import UIKit
2
3final class FormViewController: UIViewController {
4    private let nameField = UITextField()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        nameField.borderStyle = .roundedRect
9        nameField.placeholder = "Name"
10        nameField.frame = CGRect(x: 20, y: 120, width: 300, height: 40)
11
12        nameField.inputAccessoryView = makeToolbar()
13        view.addSubview(nameField)
14    }
15
16    private func makeToolbar() -> UIToolbar {
17        let toolbar = UIToolbar()
18        toolbar.sizeToFit()
19
20        let flex = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
21        let done = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneTapped))
22        toolbar.items = [flex, done]
23        return toolbar
24    }
25
26    @objc private func doneTapped() {
27        view.endEditing(true)
28    }
29}

The system automatically keeps the accessory view attached to the keyboard top.

In forms with several inputs, toolbar actions can move focus between fields.

swift

1private var fields: [UITextField] = []
2
3private func toolbar(for index: Int) -> UIToolbar {
4    let tb = UIToolbar()
5    tb.sizeToFit()
6
7    let prev = UIBarButtonItem(title: "Prev", style: .plain, target: self, action: #selector(prevField))
8    prev.tag = index
9    let next = UIBarButtonItem(title: "Next", style: .plain, target: self, action: #selector(nextField))
10    next.tag = index
11    let done = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneTapped))
12    tb.items = [prev, next, UIBarButtonItem.flexibleSpace(), done]
13    return tb
14}

Each field gets its own accessory configured with index context.

If you need a standalone toolbar not attached to input view, observe keyboard frame changes and update constraints.

swift

1private var bottomConstraint: NSLayoutConstraint!
2
3override func viewDidLoad() {
4    super.viewDidLoad()
5    NotificationCenter.default.addObserver(
6        self,
7        selector: #selector(keyboardFrameChanged(_:)),
8        name: UIResponder.keyboardWillChangeFrameNotification,
9        object: nil
10    )
11}
12
13@objc private func keyboardFrameChanged(_ note: Notification) {
14    guard
15        let info = note.userInfo,
16        let frame = info[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect,
17        let duration = info[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double,
18        let curveRaw = info[UIResponder.keyboardAnimationCurveUserInfoKey] as? UInt
19    else { return }
20
21    let keyboardHeight = max(0, view.bounds.maxY - view.convert(frame, from: nil).minY)
22    bottomConstraint.constant = keyboardHeight
23
24    UIView.animate(withDuration: duration,
25                   delay: 0,
26                   options: UIView.AnimationOptions(rawValue: curveRaw << 16)) {
27        self.view.layoutIfNeeded()
28    }
29}

This keeps custom bottom UI synchronized with keyboard animation.

Handle Safe Areas and Rotation

On modern iPhones, safe area insets and orientation changes affect available bottom space. Test keyboard toolbar behavior in portrait and landscape modes.

For accessory views, the system handles most geometry. For manual constraints, recompute offsets after rotation and scene size changes.

Also validate with hardware keyboard connected, where software keyboard may not appear.

SwiftUI Interop Note

If your app is mostly SwiftUI but uses UIKit text inputs in wrappers, you can still attach an accessory toolbar by exposing the underlying UITextField or UITextView from UIViewRepresentable. Keep toolbar creation in the coordinator so actions can call SwiftUI bindings safely.

This keeps a consistent keyboard-toolbar experience even in mixed UIKit and SwiftUI codebases.

Common Pitfalls

A common mistake is adding a toolbar as a regular subview and expecting it to follow keyboard automatically. Without keyboard notifications or input accessory usage, alignment will break.

Another issue is not animating constraint updates with keyboard timing values, causing visible jumpy motion.

Developers also forget to remove observers for long-lived controllers, which can produce duplicate callbacks. Use lifecycle-safe observer management.

Summary

Use inputAccessoryView for the simplest keyboard-top toolbar behavior.
Add Next and Done controls to improve multi-field navigation.
Use keyboard frame notifications for custom standalone toolbars.
Animate layout updates with keyboard animation duration and curve.
Test across orientations, safe areas, and hardware keyboard scenarios.

Programmatically align a toolbar on top of the iPhone keyboard

Master System Design with Codemia

Introduction

Use inputAccessoryView for Text Fields and Text Views

Add Previous and Next Navigation for Multi-Field Forms

Align a Separate Toolbar View with Keyboard Notifications

Handle Safe Areas and Rotation

SwiftUI Interop Note

Common Pitfalls

Summary

Use `inputAccessoryView` for Text Fields and Text Views