Incrementing with Stepper
Adjust values up and down with a stepper.
Incrementing with Stepper is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Meet the Stepper
A Stepper shows minus and plus buttons to nudge a value up or down. It is ideal for quantities like item counts. ➕
Stepper Holds a Number
Like Slider, a Stepper edits a number. Tapping plus increases it and tapping minus decreases it by one step.
@State private var count = 1Bind to State
Connect the value with the dollar sign binding and give it a label. SwiftUI handles the plus and minus taps for you.
Stepper("Quantity", value: $count)Set a Range
Pass an in range to clamp the value. The buttons disable automatically when you hit the minimum or maximum.
Stepper("Count", value: $count, in: 0...10)Choose the Step Size
Add a step to change how much each tap moves the value, like jumping by five instead of one.
Stepper("Score", value: $count, in: 0...100, step: 5)Show the Value
You usually want to display the current number. Interpolate it into the label so users see the count update.
Stepper("Items: \(count)", value: $count)Custom Increment Actions
Need full control? Use the onIncrement and onDecrement closures to run your own logic on each tap.
Stepper("Adjust") {
count += 2
} onDecrement: {
count -= 2
}Stepper in a Form
Drop a Stepper into a Form row for a tidy settings look, the same way Toggle and Slider fit there.
Form {
Stepper("Servings", value: $count)
}A Richer Label
The label can be any view via the closure form, so you can pair text with an icon for clarity.
Stepper(value: $count) {
Label("Cups", systemImage: "cup.and.saucer")
}React to Changes
Other views update automatically when the count changes. Here a Text repeats based on the value.
Text(String(repeating: "⭐️", count: count))The Full View
Everything together: a clamped Stepper with a step plus a label that shows the live count.
struct CartView: View {
@State private var count = 1
var body: some View {
Stepper("Qty: \(count)", value: $count, in: 1...9)
}
}Quick Check
What happens when a Stepper value reaches the top of its range?
Recap
A Stepper nudges a number with plus and minus, supports an in range and step, and clamps at the edges. ➕➖
Frequently asked questions
Is the “Incrementing with Stepper” lesson free?
Yes — the full text of “Incrementing with Stepper” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Incrementing with Stepper”?
Adjust values up and down with a stepper. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Incrementing with Stepper” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- On/Off with Toggle
- Choosing Values with Slider
- Incrementing with Stepper
- Selecting Options with Picker