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:

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:

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:

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:

Related tutorials:
- SwiftUI slider tutorial
- How to create and use toggle in SwiftUI
- How to create and use Picker with Form in SwiftUI
Take a look at Apple’s official documentation of Stepper in SwiftUI.