Making a TextField display multiple lines of text

---

You’re more of a video kind of person? I’ve got you covered! Here’s a video with the same content than this article 🍿

---

This is one of the most frustrating experience for an iOS user!

You start writing into a TextField, and as soon as your input gets longer than the width of the TextField, the text starts to scroll horizontally and you can no longer see your entire input in full:

This is particularly frustrating when entering important information, because you can no longer check at a glance that your input is correct.

Even worse, the gesture to navigate to the beginning of the input isn’t particularly smooth to perform.

But did you know that it’s possible to significantly improve this situation by adding a single line of code?

All you need to do is set the parameter axis to the value .vertical when creating the TextField…

…and now, when the input overflows the length of the TextField, the TextField will grow vertically, which means that the entire input will stay visible!

So what’s the catch? Why are not all apps using this feature?

Unfortunately, it’s an API that’s only available from iOS 16.

But if you’re lucky that your app has a minimum version of iOS 16 (or above), you really want to take a closer look at this API, because it can really improve the UX of your app without needing a lot of effort on your end!

That’s all for this article, as always I hope that you’ve enjoyed discovering this new trick.

Here’s the code if you want to experiment with it:

import SwiftUI

struct ContentView: View {
    
    @State var text = ""
    
    var body: some View {
        VStack {
            TextField(
                "Write something",
                text: $text,
                axis: .vertical
            )
        }
        .frame(width: 200)
    }
}