Typing

Typing apps are everywhere — from the keyboard-speed tests you've taken to autocorrect trainers on your phone. This one teaches you how to accept keyboard input, evaluate it, and respond.

What you'll build

A target word or phrase displayed on screen. The user types it into a TextField. The app highlights correct characters, detects when the typing is complete, and shows the result.

Key concepts

TextField — The primary text input view in SwiftUI. Bind it to a @State string and it updates as the user types.

@State var typed = ""

TextField("Start typing...", text: $typed)
    .textInputAutocapitalization(.never)
    .autocorrectionDisabled()

@FocusState — Control which field has keyboard focus. Set it to true to show the keyboard automatically when the view appears.

@FocusState var isFocused: Bool

TextField("Start typing...", text: $typed)
    .focused($isFocused)
    .onAppear { isFocused = true }

String comparison — Check typed input against the target character by character to highlight progress.

let target = "The quick brown fox"
var correctCount: Int {
    zip(typed, target).prefix(while: { $0 == $1 }).count
}

onChange(of:) — Trigger logic every time the typed text changes — to check for completion, to measure speed, to show feedback.

The keyboard is a stream

Every keystroke calls your onChange handler. That's a stream of events. Thinking in streams — reacting to changes as they happen rather than checking a value on demand — is a core skill for building responsive UIs.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and start typing.