iOS

Mastering Multiline TextField Creation in SwiftUI

Name: OneClick IT Consultancy P Limited
Address: 407-412, President Plaza Opp. Titanium Square Thaltej, Ahmedabad, Gujarat, 380054, India
Telephone: +1(802) 684-0486
Price range: $$$

Need technical help?

Our experts will get back to you within 24 hours.

Navigation

The first thing to know is that multiline text input can be added to SwiftUI in a number of ways, the options depend on the iOS version you use and how you want to add the functionality. Here, we will focus on TextField and axis with lineLimit (iOS 16+), TextEditor (any iOS version 14+) and UITextViews via UIViewRepresentable (iOS 13+).

iOS 16 and Later: TextField in Axis Mode

With iOS 16, TextField is now able to expand vertically using the axis parameter. This installs TextField like a multiline field but controls its limits on the number of lines through the .lineLimit modifier.

import SwiftUI

struct MultilineTextFieldExample: View { @State private var text: String = "Type something here..." var body: some View { TextField("Enter text", text: $text, axis: .vertical) .lineLimit(3...5) // Minimum 3 lines, maximum 5 lines .padding() .background(Color(UIColor.secondarySystemBackground)) .cornerRadius(8) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.gray.opacity(0.5), lineWidth: 1) ) .padding() }}

Key Features:

1. It expands vertically up to a defined maximum line height that you type in.

2. It auto scrolls if the maximum number of lines exceeded.

3. Minimal customization is required and works out of the box.

Using TextEditor for Multiline Input on iOS 14+

TextEditor is the only way to create a multiline text input field in iOS 14 and newer. It is flexible, powerful and supports rich formatting.

Example:

import SwiftUIstruct TextEditorExample: View { @State private var text: String = "Type something here..." var body: some View { TextEditor(text: $text) .frame(height: 150) // Set the height explicitly .padding() .background(Color(UIColor.secondarySystemBackground)) .cornerRadius(8) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.gray.opacity(0.5), lineWidth: 1) ) .padding() }}

Dynamic Growing Height:

To let the TextEditor dynamically grow while typing, it must be embedded inside a ZStack, along with an invisible Text to measure the height dynamically

import SwiftUI

struct DynamicTextEditorExample: View { @State private var text: String = "" var body: some View { ZStack(alignment: .topLeading) { if text.isEmpty { Text("Enter your text here...") .foregroundColor(.gray) .padding(.leading, 5) .padding(.top, 8) } TextEditor(text: $text) .frame( minHeight: 40, idealHeight: max(CGFloat(text.split(separator: "\n").count) * 20, 40) ) .padding(4) .background(Color(UIColor.secondarySystemBackground)) .cornerRadius(8) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.gray.opacity(0.5), lineWidth: 1) ) } .padding() }}

iOS 13+: Using UITextView via UIViewRepresentable

This usage of UITextView within UIViewRepresentable is for older iOS versions or whenever more control and customization is required. You know, you can embed UIKit components in your SwiftUI views through UIViewRepresentable.

UITextView Wrapper:

import SwiftUI struct TextView: UIViewRepresentable { typealias UIViewType = UITextView var configuration: (UITextView) -> Void func makeUIView(context: Context) -> UITextView { let textView = UITextView() textView.isScrollEnabled = true textView.isEditable = true textView.isUserInteractionEnabled = true textView.font = UIFont.systemFont(ofSize: 16) configuration(textView) return textView } func updateUIView(_ uiView: UITextView, context: Context) { configuration(uiView) }}

Benefits from UITextView:

1. Completely control its appearance and behavior.

2. Tested and therefore reliable from UIKit.

3. Compatible with legacy code bases.

4. Advanced features are highly customizable.

iOS Multiline Text Input Components Comparison

1. TextField + Axis (iOS 16+)

Use Case: This is suitable for simple multiline text input where the content needs to expand vertically and also scroll when it overflows.
Features: It supports automatic vertical expansion as more content is entered. The scroll behavior activates once the content reaches the edge, making it ideal for minimalistic text input scenarios where dynamic resizing is needed.

2. TextEditor (iOS 14+)

Use Case: The TextEditor is the default option for most multiline input use cases, especially when the height of the text field should adjust dynamically based on the content.
Features: It automatically resizes itself as text is entered, providing a smooth experience for users. It’s a more standard and flexible choice for handling larger blocks of text, with built in support for dynamic height adjustment.

3. UITextView (iOS 13+)

Use Case: This is intended for situations where there is a need for advanced text input customization or when supporting legacy applications. It’s useful for more complex use cases that require additional features.
Features: UITextView offers highly customizable properties and can handle complex behaviors like rich text formatting, custom interactions and advanced features. It’s best suited for legacy systems or when needing complete control over the input field.

Conclusion

Use the built in TextField or TextEditor to create a multi line input field in the latest iOS versions. They are simple, efficient and work very well in utilizing the SwiftUI framework. Older versions or use cases where UITextView is required to be completely wrapped up through UIViewRepresentable in order to have total efficiency and flexibility. Choose the method that suits your requirements and target the iOS version. SwiftUI is always evolving so adopting something like Axis in TextField means that your code will always remain up to date and maintainable in the future.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our iOS Expertise.