How to make TextEditor look like TextField - SwiftUI

Question

I'm looking for a way to make a swiftUI TextEditor look like a TextField. I need a multiline input but I really like the appearance of rounded TextFields.

This is the closest I was able to get:

Using this code:

TextEditor(text: $instanceNotes)
    .border(Color.gray)
    .foregroundColor(.secondary)
    .cornerRadius(3)
    .padding(.horizontal)
    .frame(height:100)

which looks/acts nothing like a TextField

This is the code for the TextField I want to replicate:

TextField("Name", text: $instanceName)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding(.horizontal)

Thanks!

Answer 1

Having the TextEditor in a Form causes the default style to change, so, the accepted answer doesn't work correctly.

I managed to get it working using:

import PlaygroundSupport
import SwiftUI

struct ContentView: View {
    @State private var text: String = "Test"

    var body: some View {
        Form {
            TextEditor(text: self.$text)
                .background(Color.primary.colorInvert())
                .cornerRadius(5)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(.black, lineWidth: 1 / 3)
                        .opacity(0.3)
                )
            TextField("", text: self.$text)
                .textFieldStyle(.roundedBorder)
        }
    }
}

PlaygroundPage.current.setLiveView(
    VStack {
        ContentView()
            .environment(\.colorScheme, .light)
        ContentView()
            .environment(\.colorScheme, .dark)
    }
)

Answer 2

This gets closer (no focus support, although that could be added):

TextEditor(text: $textBinding)
    .padding(4)
    .overlay(RoundedRectangle(cornerRadius: 8)
        .stroke(Color.secondary).opacity(0.5))

I think the most important thing is making sure that the border is actually rounded -- right now, yours is getting cut off at the corners.