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()
    }
}