Last updated on May 8, 2023

Binding is a property wrapper that allows you to create a two-way connection between a property that stores data and a view that displays and changes it. This means that any changes made to the property will be reflected in the view, and any changes made in the view will be reflected in the property. This is useful for creating interactive and responsive user interfaces with SwiftUI.

In this article, we will learn how to use Binding in SwiftUI by creating a simple app that shows a slider and a text field that control the same value.

Creating the model

First, we need to create a model class that will hold the state of our app. This class will have a property called value, which will store the current value of the slider and the text field. We will use the @Published property wrapper to mark this property as observable, so that any changes to it will trigger an update in the views that depend on it.

Here is the code for our model class:

import Foundation

class SliderModel: ObservableObject {
    @Published var value = 0.0
}

Creating the view

Next, we need to create a view that will display the slider and the text field. This view will have a property called model, which will be an instance of our model class. We will use the @ObservedObject property wrapper to mark this property as an observable object, meaning that any changes to its @Published properties will trigger an update in the view.

We will use a VStack to arrange our views vertically, and a Slider and a TextField to show and change the value of our model. We will use the $ prefix to create a binding to our model’s value property, which will allow us to pass it as an argument to both views. This way, any changes made to the slider or the text field will be reflected in both views and in our model.

We will also use a Text to show the current value of our model as a percentage.

Here is the code for our view:

import SwiftUI

struct SliderView: View {
    @ObservedObject var model = SliderModel()
    
    var body: some View {
        VStack {
            Text("Value: \(Int(model.value * 100))%")
                .font(.largeTitle)
            Slider(value: $model.value)
                .padding()
            TextField("Enter value", value: $model.value, formatter: NumberFormatter.percent)
                .padding()
                .border(Color.gray)
        }
    }
}

Testing the app

Finally, we can test our app by running it in a simulator or on a device. We should see something like this:

We can drag the slider or enter a value in the text field to change the value of our model, and see both views update accordingly.

Conclusion

In this article, we learned how to use Binding in SwiftUI to create interactive and responsive user interfaces. We created a simple app that shows a slider and a text field that control the same value. We used the @Published property wrapper to mark a property of our model class as observable, and the @ObservedObject property wrapper to mark an instance of our model class as an observable object. We also learned how to use the $ prefix to create a binding to our model’s property, and how to use Slider, TextField and Text views to create our user interface.