DigitalOcean Referral Badge
Udit Vashisht
Author: Udit Vashisht


Multi-line text input in SwiftUI

  • 2 minutes read
  • 34 Views
Multi-line text input in SwiftUI

    Table of Contents

How to add multi-line text input option in SwiftUI?

We use SwiftUI’s TextField when the user wishes to input short text strings. However, you should switch to a TextEditor view for longer pieces of text.
Just like TextField, it requires a two-way binding to a text string, but it has the added bonus of allowing several lines of text — it’s much more suitable for taking larger strings from the user.

TextEditor is simpler to use than TextField, however, it has no special configuration options; you cannot modify its style or add placeholder text; instead, you just bind it to a string.

However, care must be taken to ensure that it does not extend beyond the safe region; if it does, typing will be difficult; embed it in a NavigationView, a Form, or something similar.

Code for multi-line text input option in SwiftUI?

The code for accepting multi-line text input with TextEditor

struct ContentView: View {
    @State private var notes = ""

    var body: some View {
        NavigationView {
            TextEditor(text: $notes)
                .navigationTitle("Notes")
                .padding()
        }
    }
}

texteditor-accepting-multi-line-text.gif

How to add a border to multi-line TextEditor ?

You can use the .border modifier to add a border to your multi-line text editor

.border(Color.red, width: 5)

Simulator Screen Shot - iPhone 13 Pro Max - 2022-05-07 at 18.48.00.png

How to add a frame with a border to multi-line TextEditor?

Alternatively, you can use the following modifiers to TextEditor to add frame and border to your editor

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 200)
.border(Color.red, width: 2)

texteditor-swiftui-multi-line.png

How to add a background color to TextEditor?

There is no straight way or modifier by which we can add a background color to the Text Editor. But there is a work through, a little hack, we will wrap it in a ZStack with a Background Color and then remove the background color of the UITextView on appear. The complete code is :-

struct ContentView: View {
    @State private var notes = ""

    var body: some View {
        NavigationView {
            ZStack{
                Color.red
                TextEditor(text: $notes)
                    .foregroundColor(Color.blue)
                    .navigationTitle("Notes")
                    .padding()
                    .border(Color.blue, width: 5)
            }.onAppear() {
                UITextView.appearance().backgroundColor = .clear
            }

        }
    }
}

TextEditor with background.png


Related Posts

How to create a re-usable Star Rating View in SwiftUI?
By Udit Vashisht

Create a Star Rating view in SwiftUI?

In this post, we will be creating a Custom Star Rating View, where we can give a rating from 1 to 5 stars. In this example we will using a “Star” but alternatively you can use heart or any other image too.

To ...

Read More
Search
Tags
tech tutorials automate python beautifulsoup web scrapping webscrapping bs4 Strip Python3 programming Pythonanywhere free Online Hosting hindi til github today i learned Windows Installations Installation Learn Python in Hindi Python Tutorials Beginners macos installation guide linux SaralGyaan Saral Gyaan json in python JSON to CSV Convert json to csv python in hindi convert json csv in python remove background python mini projects background removal remove.bg tweepy Django Django tutorials Django for beginners Django Free tutorials Proxy Models User Models AbstractUser UserModel convert json to csv python json to csv python Variables Python cheats Quick tips == and is f string in python f-strings pep-498 formatting in python python f string smtplib python send email with attachment python send email automated emails python python send email gmail automated email sending passwords secrets environment variables if name == main Matplotlib tutorial Matplotlib lists pandas Scatter Plot Time Series Data Live plots Matplotlib Subplots Matplotlib Candlesticks plots Tutorial Logging unittest testing python test Object Oriented Programming Python OOP Database Database Migration Python 3.8 Walrus Operator Data Analysis Pandas Dataframe Pandas Series Dataframe index pandas index python pandas tutorial python pandas python pandas dataframe python f-strings padding how to flatten a nested json nested json to csv json to csv python pandas Pandas Tutorial insert rows pandas pandas append list line charts line plots in python Django proxy user model django custom user model django user model matplotlib marker size pytplot legends scatter plot python pandas python virtual environment virtualenv venv python python venv virtual environment in python python decorators bioinformatics fastafiles Fasta python list append append raspberry pi editor cron crontab Cowin Cowin api python dictionary Python basics dictionary python list list ios development listview navigationview swiftui ios mvvm swift environmentobject property wrapper @State @Environm popup @State ios15 alert automation instagram instaloader texteditor youtubeshorts textfield multi-line star rating reusable swift selenium selenium driver requests-html youtube youtube shorts python automation