Search code examples
swiftswiftuiswiftui-texteditor

How to make TextEditor look like TextField - SwiftUI

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: enter image description here

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!

Solution

  • 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.