How to create a stepper and read values from it

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

SwiftUI’s Stepper control lets users select values from a range we specify, providing the same functionality as UIStepper from UIKit.

As an example, this creates a stepper bound to an age property, letting users select values in the range 0 through 130 inclusive:

struct ContentView: View {
    @State private var age = 18

    var body: some View {
        VStack {
            Stepper("Enter your age", value: $age, in: 0...130)
            Text("Your age is \(age)")
        }
    }
}

Download this as an Xcode project

The words “Enter your age” beside a grey capsule containing a minus and a plus button. Below are the words “Your age is 18”.

Rather than binding directly to a value, you can also provide custom onIncrement and onDecrement closures to do custom work, like this:

struct ContentView: View {
    @State private var age = 18

    var body: some View {
        VStack {
            Stepper("Enter your age", onIncrement: {
                age += 1
            }, onDecrement: {
                age -= 1
            })

            Text("Your age is \(age)")
        }
    }
}

Download this as an Xcode project

The words “Enter your age” beside a grey capsule containing a minus and a plus button. Below are the words “Your age is 18”.