SwiftUI stepper tutorial – how to create and use stepper in SwiftUI

Stepper is a user interface control which enables you to increment or decrement a value by tapping on its plus or minus elements. Stepper in SwiftUI is very similar to UIStepper in UIKit.

This tutorial will teach you how to create and use a stepper in SwiftUI. In order to read a value from a SwiftUI stepper, you need to bind it to a state variable or instantiate it with custom closures which get executed on increment or decrement actions.

Create a stepper and read the stepper’s value

First of all, define a State variable holding the stepper’s value and then pass its binding when initializing the stepper:

struct ContentView: View {
    @State var stepperValue: Int = 0

    var body: some View {
        VStack {
            Stepper("Stepper value: \(stepperValue)", value: $stepperValue)
        }.padding()
}

The result should look like this:

Stepper in SwiftUI
Stepper in SwiftUI

TIP: Press and hold stepper’s increment or decrement buttons to repeatedly apply increment or decrement actions.

Restrict stepper values to a range

Pass the in parameter when initializing the stepper in order to restrict its range of possible values to a given interval. In this example we’re only allowing the values between 0 and 6 (inclusive):

Stepper("Stepper value: \(stepperValue)", value: $stepperValue, in: 0...6)

Define step value

It is also possible to specify by how much the stepper’s value should change upon each increment/decrement action. In this example we’re allowing the stepper to increment its value by 2:

Stepper("Stepper value: \(stepperValue)", value: $stepperValue, in: 0...6, step: 2)

Using custom onIncrement and onDecrement closures

In order to perform custom action upon each increment and decrement, it is possible to pass custom closures to handle each case. In the following code example we’re printing text and adjusting the stepperValue accordingly:

Stepper(onIncrement: {
    print("Stepper onIncrement")
    self.stepperValue += 1
}, onDecrement: {
    print("Stepper onDecrement")
    self.stepperValue -= 1
}) {
    Text("Stepper value: \(self.stepperValue)")
}

Using stepper with Double or Float values

So far we explored the functionality of stepper based on Int values. It is equally easy to start using a Float or Double based stepper. All you need to do, is update the declaration of the stepperValue to Float or Double and then narrow down the step value of the stepper to specific Float value. Finally, make sure the stepper’s label formats the Float output to fit your needs. Here is the code:

@State var stepperValue: Float = 0.0
...
Stepper("Stepper value: \(stepperValue, specifier: "%.2f")", value: $stepperValue, in: 0...5, step: 0.25)

The result should look like this:

Stepper in SwiftUI using Float values.
Stepper in SwiftUI using Float values.

Use an SF Symbol in stepper’s label

Wrap the stepper’s label in an HStack and add SF Symbol:

Stepper(value: $stepperValue) {
    HStack {
        Text("Value: \(self.stepperValue)")
        Image(systemName: "dollarsign.circle")
    }
}

It should look like this:

Stepper in SwiftUI with SFSymbol in label.
Stepper in SwiftUI with SFSymbol in label.

Increase size of a shape according to stepper’s value

In this example, we’re going to remove the stepper’s label and place it centered, at the top of the screen. Then, we’re going to add a Circle shape below the stepper, which dimensions are going to be directly related to the stepper’s value. Incrementing or decrementing the stepper will increase or decrease the size of the circle.

Here is entire code:

@State var circleSize: Float = 20.0

var body: some View {
    VStack {
        HStack {
            Spacer()
                Stepper("", value: $circleSize, in: 10...500, step: 10.0)
                .frame(width: 100, height: 50)
            Spacer()
        }
        
        Circle()
            .frame(width: CGFloat(circleSize), height: CGFloat(circleSize))
            .foregroundColor(.blue)
            .animation(.easeIn)
        
        Spacer()
        Spacer()
    }.padding()
}

Note that we’re using the value of circleSize when creating circle’s frame.

The result should look like this:

Stepper in SwiftUI adjusting size of a shape.
Stepper in SwiftUI adjusting size of a shape.

Related tutorials:

Take a look at Apple’s official documentation of Stepper in SwiftUI.