SwiftUI TextEditor: A user friendly guide

SwiftUI TextEditor is a great component that empowers developers to work with large text input and editing in SwiftUI applications. TextEditor is a dynamic, rich, and customisable solution that offers a world of possibilities for crafting engaging user interfaces.

In this blog post, we’re going to take a deep dive into SwiftUI TextEditor, exploring its features, capabilities, and how you can use it in your application. I hope that whether you’re new to SwiftUI or a seasoned developer, this guide will provide you with insights and practical examples to unlock the full potential of TextEditor in your projects.

How do you write multiline text in SwiftUI?

In SwiftUI, you can easily create and display multiline text using the TextEditor view. Multiline text is widely used and thank God for TextEditor, it just makes our life so much easier. All we need is to use the TextEditor view and it takes care of multiline text and TextEditor is easy to customerize. 

Keep on reading to learn how to use TextEditor and customise it to fit into your application.

SwiftUI TextEditor example

Let’s kick things off with a basic example on how to use the TextEditor. Firstly you add the TextEditor to the view and then you want to add a State variable can contains the input in the TextEditor:

import SwiftUI

struct TextEditorView: View {
    @State var textEditor: String = ""
    
    var body: some View {
        VStack {
            TextEditor(text: $textEditor)
        }
        .background(Color.gray)
    }
}

The result:

SwiftUI TextEditor background color

In order to change the background color of at TextEditor you would think all you need to do, was use the .background() modifier and use some kind of color — but no, that doesn’t work.

But luckily where is a great and easy workaround, just add .scrollContentBackground(.hidden) before setting the background color. In the following example we will create a TextEditor and make the background color grey:

import SwiftUI

struct TextEditorView: View {
    @State var textEditor: String = ""
    
    var body: some View {
        TextEditor(text: $textEditor)
            .scrollContentBackground(.hidden)
            .background(Color.gray)
    }
}

The result:

SwiftUI TextEditor text color

Unlike the background color, the text color is easy to set. All we need to do is to use the .foregroundColor modifier and wupti — the text color changed.

In the following example we will set the text color to white and keep the background color grey:

import SwiftUI

struct TextEditorView: View {
    @State var textEditor: String = ""
    
    var body: some View {
        TextEditor(text: $textEditor)
            .scrollContentBackground(.hidden)
            .background(Color.gray)
            .foregroundColor(Color.white)
    }
}

The result:

TextEditor space between lines

Adjusting the space between lines in text, also known as line spacing or leading, can be a good idea for various reasons, depending on the context and design goals.

In the following example we will create a TextEditor and set the .lineSpacing to 10:

import SwiftUI

struct TextEditorView: View {
    @State var textEditor: String = ""
    
    var body: some View {
        TextEditor(text: $textEditor)
            .scrollContentBackground(.hidden)
            .background(Color.gray)
            .foregroundColor(Color.white)
            .lineSpacing(10)
    }
}

The result:

SwiftUI TextEditor border

In order to create a border around your TextEditor all you need to do is use the .border modfier. And you can use the normal parameters to costumize the border to fit your style.

In the following example we will create a TextEditor with a thick red border and make the corners round.

import SwiftUI

struct TextEditorView: View {
    @State var textEditor: String = ""
    
    var body: some View {
        TextEditor(text: $textEditor)
            .frame(width: 300, height: 200)
            .border(Color.red, width: 5)
            .clipShape(RoundedRectangle(cornerRadius: 5, style: .continuous))
    }
}

The result:

SwiftUI TextEditor wrap up

SwiftUI TextEditor is a awesome component for handling text input and editing in your applications. Its easy to implement the TextEditor witch makes it a valuable tool for a wide range of use cases.

Whether you’re building a simple note-taking app or a complex messaging platform, TextEditor has got you covered.

Scroll to Top