Forms & User Input
Apps live on user input. SwiftUI's Form gives you a polished, settings-style container, and controls like TextField , Toggle , Picker , and Stepper read and write your state through bindings . Wire them up and your screen becomes interactive.
Learn Forms & User Input in our free Swift course — a beginner-friendly interactive lesson with worked examples, a practice exercise and a quick reference.
Part of the free Swift course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
Building iOS Apps with SwiftUI • Intermediate
What You'll Learn in This Lesson
- • Lay out input with Form and Section
- • Capture text with TextField / SecureField
- • Flip booleans with Toggle
- • Choose options with Picker
- • Adjust numbers with Stepper via $ bindings
1️⃣ Form & Section
Form arranges controls into a scrollable, settings-style layout. Group related controls with Section , optionally adding a header. SwiftUI handles all the styling.
2️⃣ TextField — Capturing Text
TextField binds to a String via the $ prefix, so typing updates your state live. Modifiers like .keyboardType tune the keyboard, and SecureField hides sensitive input.
3️⃣ Toggle, Picker & Stepper
Toggle binds to a Bool , Picker to a selection (matched by each option's tag ), and Stepper to a number it can increment within a range. All read and write through bindings.
Your turn. Fill in the blanks to wire up a small sign-up form.
Pro Tips
- 💡 Always pass the $ binding. Controls need read-write access, not a copy of the value.
- 💡 Tune the keyboard. Use .keyboardType(.emailAddress) or .numberPad to help users.
- 💡 Tag your Picker options so the selection value matches each row.
Common Errors (and the fix)
- "Cannot convert value of type 'String' to expected 'Binding<String>'" — you forgot the $ . Write TextField("Email", text: $email) .
- Picker selection never changes — your options' .tag(...) values don't match the type of the selection binding.
- Stepper goes out of bounds — add a range: value: $quantity, in: 1...10 .
Frequently Asked Questions
Mini-Challenge: Booking Form
Build a Form with two sections. In "Guest" put a TextField for the name. In "Details" put a Picker to choose a room type from three options, a Stepper for the number of nights (1 to 14), and a Toggle for "Include breakfast". Show a live summary Text below that reflects all the bound state.
🎉 Lesson Complete!
- ✅ Form + Section give a styled, scrollable input layout
- ✅ TextField / SecureField bind to a String
- ✅ Toggle → Bool , Picker → selection, Stepper → number
- ✅ Every control reads and writes through a $ binding
- ✅ Next lesson: Animations & Transitions
Practice quiz
What is the Form view used for?
- Drawing charts
- Grouping controls for data entry in a styled, scrollable container
- Networking
- Playing audio
Answer: Grouping controls for data entry in a styled, scrollable container. Form groups input controls into a platform-styled, scrollable settings-like layout.
What does TextField bind to?
- A Bool
- A String (the editable text) via a binding
- An Int only
- Nothing
Answer: A String (the editable text) via a binding. TextField takes a Binding to a String so typing updates your state and vice versa.
Which prefix passes a binding to a control like TextField?
- #
- &
- $ (the projected value)
- @
Answer: $ (the projected value). The $ prefix turns an @State into the Binding the control reads and writes.
What does Toggle bind to?
- A String
- A Double
- An array
- A Bool (on/off state) via a binding
Answer: A Bool (on/off state) via a binding. Toggle reads and writes a Bool through its isOn binding.
What is Picker used for?
- Picking colors only
- Choosing one option from several, bound to a selection
- Cropping images
- Sorting lists
Answer: Choosing one option from several, bound to a selection. Picker lets the user choose one value from a set, bound to a selection property.
What does the selection binding of a Picker track?
- The chosen option's tag/value
- The screen brightness
- The list length
- Nothing
Answer: The chosen option's tag/value. The selection binding holds the currently chosen option, matched to each option's tag.
What does Stepper bind to and do?
- A Bool it toggles
- A numeric value it increments and decrements
- A String it edits
- A date only
Answer: A numeric value it increments and decrements. Stepper increases or decreases a bound numeric value with + and − buttons.
Why does a TextField need a binding rather than a plain value?
- For color
- So edits flow back into your state (two-way)
- To make it faster
- It does not need one
Answer: So edits flow back into your state (two-way). A binding is two-way: the field displays the state and writes the user's edits back to it.
What does the .keyboardType(.emailAddress) modifier do?
- Validates the email
- Shows a keyboard suited to typing an email
- Sends the email
- Encrypts input
Answer: Shows a keyboard suited to typing an email. .keyboardType configures which on-screen keyboard appears for a TextField.
How do you group related controls within a Form?
- Section { ... }
- Group all in a ZStack
- Use Spacer
- You cannot group
Answer: Section { ... }. Wrap related controls in a Section to give a Form visually separated groups with optional headers.
Continue this course
- Previous: Lists, ForEach & Navigation
- Next: Animations & Transitions