New in SwiftUI 4: Expanding TextField
TextField in SwiftUI 4 now supports multiline view, meaning it can grow as you type to make more room for the content. This is accomplished with a newly addition to existing TextField API called axis.
In this article, we will learn how to use expanding TextField inside our apps.
So starting iOS 16 and SwiftUI 4, TextField has a new parameter called axis which takes two values, horizontal or vertical, and when its set, our TextField can grow in that direction. Let’s create an example for this:
We will start with a State variable to bind our TextField’s text property as shown below:
@State private var expandingText = "DevTechie.com is a development training website where you can learn to develop apps with practical examples. Our goal is to bring you quality content and our collection is increasing day to day basis."
Next we will add TextField with axis param set as .vertical
TextField("Share your feedback", text: $expandingText, axis: .vertical)
.textFieldStyle(.roundedBorder)Complete code looks like this:
struct ContentView: View {
@State private var expandingText = "DevTechie.com is a development training website where you can learn to develop apps with practical examples. Our goal is to bring you quality content and our collection is increasing day to day basis."
var body: some View {
VStack {
Text("DevTechie")
.font(.largeTitle)
TextField("Share your feedback", text: $expandingText, axis: .vertical)
.textFieldStyle(.roundedBorder)
}
.padding()
}
}
Limiting Number of Lines
With the help of lineLimit modifier, we can set maximum number of lines TextField can grow and if the content grows beyond the limit, content becomes scrollable:
struct ContentView: View {
@State private var expandingText = "DevTechie.com is a development training website where you can learn to develop apps with practical examples. Our goal is to bring you quality content and our collection is increasing day to day basis."
var body: some View {
VStack {
Text("DevTechie")
.font(.largeTitle)
TextField("Share your feedback", text: $expandingText, axis: .vertical)
.textFieldStyle(.roundedBorder)
.lineLimit(3)
}
.padding()
}
}
If the TextField is empty then it starts with a single line and expands until it reaches the limit. Scroll capability is added after we go over the limit.
We can also provide a range in lineLimit modifier to define minimum and maximum values for TextField expansion.
struct ContentView: View {
@State private var expandingText = "DevTechie.com is a development training website where you can learn to develop apps with practical examples. Our goal is to bring you quality content and our collection is increasing day to day basis."
var body: some View {
VStack {
Text("DevTechie")
.font(.largeTitle)
TextField("Share your feedback", text: $expandingText, axis: .vertical)
.textFieldStyle(.roundedBorder)
.lineLimit(3...5)
}
.padding()
}
}
With that we have reached the end of this article. Thank you once again for reading. Subscribe our newsletter at https://www.devtechie.com