Create multiline textfield in SwiftUI
In this tutorial, we will learn how to create multiline textfiled in SwiftUI with examples.
We will cover these:
- Simple TextField.
- Vertically scrolling TextField.
- TextField with a limited No of lines.
- Textfield with reserved space for limited lines.
We use TextFileds for taking user inputs. By default, textfield consists of a single line. And if the text inside the textfield gets larger than its space, it scrolls horizontally.
But SwiftUI comes with a new initializer that lets us change the textfield to a multiline textfield which will scroll vertically and can take multi-line input.
MultiLine textField in SwiftUI
Let’s see how we can change the default textfield to a multiline textfield which will be able to take multiline input.
Simple TextField
So the simple textfield looks like this, which just takes the single line input and scrolls horizontally when the text gets longer than its contained space.
struct ContentView: View { @State var bindingString = "" var body: some View { VStack(spacing: 15){ //plain textfield default axis is horizontal TextField("Plain Text Field", text: $bindingString) } } }
- The textfield initializer originally takes two arguments, placeholder text and a binding string.
- A binding string is nothing but a simple state variable that can be changed.
Vertically scrolling TextField – SwifUI
SwiftUI comes with a new initializer for textfield that takes the axis as an argument and lets the textfield grow dynamically with its content and accept multiline input.
struct ContentView: View { @State var bindingString = "" var body: some View { VStack(spacing: 15){ //plain textfield default axis is horizontal TextField("Plain Text Field", text: $bindingString) .textFieldStyle(.roundedBorder) Text("_________________________") //textfield with axix parameter, textfield will expand vertically. inifinte lines TextField("TextField with vertical axis", text: $bindingString, axis: .vertical) .textFieldStyle(.roundedBorder) } } }
TextField with a limited No of lines
We can also specify the no of lines or set the limit to which the textfield will grow its content by using the lineLimit modifier.
struct ContentView: View { @State var bindingString = "" var body: some View { VStack(spacing: 15){ //plain textfield default axis is horizontal TextField("Plain Text Field", text: $bindingString) .textFieldStyle(.roundedBorder) Text("_________________________") //textfield with axix parameter, textfield will expand vertically. inifinte lines TextField("TextField with vertical axis", text: $bindingString, axis: .vertical) .textFieldStyle(.roundedBorder) Text("_________________________") //Textfield with lineLimit TextField("Textfield with lineLimit", text: $bindingString, axis: .vertical) .lineLimit(2) .textFieldStyle(.roundedBorder) } } }
Textfield with reserved space for limited lines
LineLimit modifier lets the textfield take input for the specified no of lines and grows dynamically according to its input. But we can also reserve its space for a specified no of lines without taking the input. The LineLimit has an initializer that takes the line limit and reserved space argument as input. the reserved space argument if set to true will change the height of textfield to the specified number of lines.
And besides the textFields, we can also use TextEditor for taking multiline input. Behind the scenes, this thing will work like regular textfields.
TextEditor(text: $bindingString)
struct ContentView: View { @State var bindingString = "" var body: some View { VStack(spacing: 15){ //plain textfield default axis is horizontal TextField("Plain Text Field", text: $bindingString) .textFieldStyle(.roundedBorder) Text("_________________________") //textfield with axix parameter, textfield will expand vertically. inifinte lines TextField("TextField with vertical axis", text: $bindingString, axis: .vertical) .textFieldStyle(.roundedBorder) Text("_________________________") //Textfield with lineLimit TextField("Textfield with lineLimit", text: $bindingString, axis: .vertical) .lineLimit(2) .textFieldStyle(.roundedBorder) Text("_________________________") //Textfield with lineLimit and reserved space TextField("Textfield with lineLimit and reserved space for 3 lines", text: $bindingString, axis: .vertical) .lineLimit(3, reservesSpace: true) .textFieldStyle(.roundedBorder) } .padding() } }
Leave a Reply