Stepper

The Stepper is used to give the user precise control over increasing or decreasing a value.

Syntax

var body: some View {
    Stepper(value: Binding<Stridable>, in: ClosedRange<Int/Double>, step: Int/Double) {
        Label here
    }
    Modifiers here
}
  • The first parameter that Stepper takes is a value. This parameter needs to be bound to a variable that tracks changes.
  • The second parameter, in, specifies the minimum and maximum values accepted by the stepper.
  • The third parameter, step, specifies the amount that value should be incremented or decremented by inside the stepper’s range.
  • A stepper view’s shape, color, and text can be edited using modifiers.

Example

In the example below, @State is used to store the mutable integer value. A Stepper is used to count the number of people.

@State var numberOfPeople = 4
var body: some View {
Stepper(value: $numberOfPeople, in: 2...10, step: 1) {
Text("People count: \(numberOfPeople)")
}
.padding()
}

This will display the following:

Stepper

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn SwiftUI on Codecademy