How to implement a dynamic height SwiftUI TextField with line limit?

Question

I'm working on a SwiftUI app that needs a TextField that dynamically expands as the user types but with a maximum number of lines. I want it to:

Start with a single line Grow as the user types until reaching max lines Then become scrollable once max lines is reached

Here's my current implementation, but it doesn't handle the height correctly:

struct ContentView: View {
    @State private var text = ""
    
    var body: some View {
        VStack {
            TextField("Enter your text here", text: $text)
                .padding()
                .frame(minHeight: 40)
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
                .lineLimit(5)
        }
        .padding()
    }
}

The TextField doesn't grow properly, and once the text exceeds the visible area, it just clips instead of becoming scrollable. How can I implement this correctly in SwiftUI?

you could try using TextEditor instead.

workingdog support Ukraine
– workingdog support Ukraine

2025-05-17 22:31:33 +00:00
Commented May 17 at 22:31 — workingdog support Ukraine
– workingdog support Ukraine, Commented May 17 at 22:31

Andrei G. · Accepted Answer · 2025-05-17 20:08:32Z

1

You just need the .axis: .vertical parameter:

import SwiftUI

struct ExpandingTextField: View {
    
    @State private var text = ""
    
    var body: some View {
        TextField("Enter your text here", text: $text, axis: .vertical)
            .padding(10)
            .background(Color.gray.opacity(0.2), in: .rect(cornerRadius: 8))
            .lineLimit(5)
            .padding()
    }
}

#Preview {
    ExpandingTextField()
}

answered May 17 at 20:08

Andrei G.

2,6862 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement a dynamic height SwiftUI TextField with line limit?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related