SwiftUI forms: TextField

Sep 25, 2021

Learn how to use the TextField control in SwiftUI to get text input from the user, binding it to a @State property and setting placeholder text.

~~~

The first form control we’ll see is the simplest: TextField.

This lets us show some text, like the Text view, and it can be editable by the user, so we can get input in the form of text.

Here’s the most basic example of TextField:

struct ContentView: View {
    @State private var name = ""
    
    var body: some View {
        Form {
            TextField("", text: $name)
        }
    }
}

We have a SwiftUI: properties that we prefaced with the @State property wrapper.

Run the code. You can see an empty text field. You can tap on it:

Xcode showing SwiftUI TextField code with iOS simulator displaying an empty text field in a form

And you can enter any text inside it:

iOS simulator showing the text field with user input text displaying the word test

The first argument of TextField is a string that’s visualized when the field is empty. You can fill it with any text you want, like this:

TextField("Your name", text: $name)

iOS simulator displaying a text field with Your name placeholder text visible

Tagged: Swift · All topics

~~~