TextField `title` is never shown on iOS if `prompt` is provided?

Viewed 418

Scenario

I have a multiplatform app written in SwiftUI. I want to share as much code between iOS and macOS as possible.

I have not been able to display both title and prompt of a TextField on iOS. When wrapped in a Form, both are displayed on macOS (provided that we use the TextField initializer passing both a title and a prompt of course), but never on iOS.

Documentation states:

You can set an explicit prompt on the text field to guide users on what text they should provide. Each text field style determines where and when the text field uses a prompt and label. For example, a form on macOS always places the label at the leading edge of the field and uses a prompt, when available, as placeholder text within the field itself. In the same context on iOS, the text field uses either the prompt or label as placeholder text, depending on whether the initializer provided a prompt.

iOS

Screenshot

ios

Code

struct ContentView: View {
    @State var text1 = ""
    @State var text2 = ""
    @State var text3 = ""
    var body: some View {
        Form {
            TextField("T1", text: $text1, prompt: Text("P1"))
            TextField(text: $text2, prompt: Text("P2")) {
                Text("T2")
            }
            TextField("T3", text: $text3)
            
            Text("iOS: `title` \"T1\" & \"T2\" is never shown, \"P1\", \"P2\" & \"T3\" is shown when fields are empty.")
        }.padding()
    }
}

macOS

Screenshot

macOS

Code

Code is identical....

struct ContentView: View {
    @State var text1 = ""
    @State var text2 = ""
    @State var text3 = ""
    var body: some View {
        Form {
            TextField("T1", text: $text1, prompt: Text("P1"))
            TextField(text: $text2, prompt: Text("P2")) {
                Text("T2")
            }
            TextField("T3", text: $text3)
            
            Text("macOS: `title` \"T1\", \"T2\" & \"T3\" are always shown, \"P1\", \"P2\" are shown when fields are empty.")
        }.padding()
    }
}

Problem

The documentation shows an example which uses the prompt "Required" for a password field. This is extremely confusing when only this prompt is shown and never the title "Password"` on iOS. Because the user does not know what she is inputting... Just that she is inputting something that is required.

Question

How can I avoid prompt hiding title on iOS, while still leverage them on macOS? Feels like I have to write my own TextField view impl checking if platform is macOS then do nothing, otherwise if iOS add a manual title view and wrap them in a HStack/VStack?

What am I missing?

0 Answers
Related