Hello everyone. I'm building a simple Form in a Multiplatform App with SwiftUI. Originally I had something like this.
import SwiftUI
struct OnboardingForm: View {
@State var firstName: String = ""
@State var lastName: String = ""
@State var email: String = ""
@State var job: String = ""
@State var role: String = ""
var body: some View {
Form {
TextField("First Name", text: $firstName, prompt: Text("Required"))
TextField("Last Name", text: $lastName, prompt: Text("Required"))
TextField("Email", text: $email, prompt: Text("Required"))
TextField("Job", text: $job, prompt: Text("Required"))
TextField("Role", text: $role, prompt: Text("Required"))
}
}
}
#Preview {
OnboardingForm()
}
In macOS it looks ok but then in iOS it looks like this:
and it's impossible to know what each field is for if all the prompts are the same. I tried adding LabeledContent
around each text field and that solves it for iOS but then on macOS it looks like this:
The labels are shown twice and the columns are out of alignment. I think I could get around it by doing something like this:
#if os(iOS)
LabeledContent {
TextField("First Name", text: $firstName, prompt: Text("Required"))
} label: {
Text("First Name")
}
#else
TextField("First Name", text: $firstName, prompt: Text("Required"))
#endif
but it seems to me like reinventing the wheel. Is there a "correct" way to declare TextFields with labels that works for both iOS and macOS?