Create a multi-line, editable text view using TextEditor in SwiftUI. – iOSTutorialJunction

In UIKit, we use UITextView for input fields that require long text entries from the user. In SwiftUI, we can accomplish the same with TextEditor. The TextEditor view in SwiftUI handles multiline text input. In this tutorial, we will learn how to use TextEditor with a placeholder, making it function similarly to a UITextView in UIKit.

Step-by-Step Implementation of multi-line editable text field in SwiftUI

Step 1: Open Xcode and select “Create a new Xcode project.“. Choose “App” under the iOS tab.Name your project and make sure “SwiftUI” is selected for the User Interface.

Step 2: Create a state variable named multiLineText.

import SwiftUI

struct FeedbackView: View {
   @State private var multiLineText = ""
   var body: some View {
   }

}

Step 3: Let start designing our multi-line text field in SwiftUI using TextEditor.

• First we will take VStack with alignment to leading as we want our view to not to be in centre of screen but toward the leading edge.
• Add a Text view with title “Comment” illustrating user the he can add comments below
• Take a ZStack with alignment to topLeading and inside it first we will add a RoundedRectangle view so that we can give border to our TextEditor. Then will check if state variable named multiLineText is empty or not. If it’s empty we will add placeholder text using Text view.
• Finally we will add TextEditor to our ZStack. Lastly we will change opacity of TextEditor if it’s empty in order to let placeholder Text visible to user.

Complete code snippet is given below.

import SwiftUI

struct ContentView: View {
    @State private var multiLineText = ""
    var body: some View {
        VStack(alignment: .leading) {
            Text("Comment")
                .font(.system(size: 14.0, weight: .medium))
            ZStack(alignment: .topLeading) {
                RoundedRectangle(cornerRadius: 14, style: .continuous)
                    .strokeBorder(Color.red.opacity(0.6), lineWidth: 1)
                if multiLineText.isEmpty {
                    Text("Placeholder Text")
                        .foregroundColor(Color.gray)
                        .font(.system(size: 14.0, weight: .regular))
                        .padding(.horizontal, 8)
                        .padding(.vertical, 12)
                }
                TextEditor(text: $multiLineText)
                    .font(.system(size: 14.0))
                    .opacity(multiLineText.isEmpty ? 0.7 : 1)
                    .padding(4)
                
            }
            .frame(height: 135)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Output of using TextEditor with Placeholder in SwiftUI

This code snippets will give you a multi-line editable text field in SwiftUI with a placeholder that disappears once the user starts typing and re – appears if its empty