Text & Input (TextField, Button)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Text & Input (TextField, Button), without any of the intimidation
Get hands-on running Xcode/SwiftUI code yourself
Apply this concept immediately in a real project

Let's think about this for a moment

TextField is a view that captures text input from the user — you pair the `text:` parameter with a `$` binding to `@State` (from the previous lesson), since in SwiftUI a TextField doesn't hold internal state itself — it's controlled by the parent (the controlled-component pattern, similar to Compose/React). Button, meanwhile, is a view that triggers a trailing closure.

Let's connect this to a real-world scenario

Write `@State private var email = ""` and then `TextField("Email", text: $email)` — as the user types, the `email` state updates immediately, and the TextField in turn displays whatever text the user has typed on screen. Tapping a 'Submit' Button lets you validate/submit the `email` value.

TextField = a view that captures user text input (connected to @State via a $ binding)
Button = a view that triggers a trailing closure
TextField is a controlled component — it holds no internal state, it's controlled via a $ binding

Let's look at it together

swift

struct LoginForm: View {
    @State private var email = ""
    @State private var password = ""

    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .textFieldStyle(.roundedBorder)
            SecureField("Password", text: $password)
                .textFieldStyle(.roundedBorder)
            Button("Login") {
                print("Login: \(email)")
            }
        }
        .padding()
    }
}

You should see

Type into both TextFields and tap the Login button — the Console should print 'Login: <email>'.

Try it in 5 minutes

Run the `LoginForm` View — type in the email/password fields, tap the Login button, and check the Console output.

A quick word of caution

Don't rely on form validation (email format, password length) on the client side alone — in a production app you always need server-side validation too (client-side validation can be bypassed).

Easy traps

Writing a TextField without the `$` prefix (writing just `text: email`) — this causes a compile error or results in one-way binding
Using a plain `TextField` for a password field — you need `SecureField` to mask the password with dots

Now try it yourself

Run the `LoginForm` View — type in the email/password fields, tap the Login button, and check the Console output.

You'll know it worked when: Type into both TextFields and tap the Login button — the Console should print 'Login: <email>'.