@Binding for child communication in iOS Swift - Mini App: Build & Ship

Build: Toggle Switch Screen

A screen with a toggle switch controlled by a child view using @Binding to communicate changes back to the parent.

Target UI

---------------------
| Toggle Switch App |
|-------------------|
| Parent View       |
|  Switch is OFF    |
|                   |
| [ToggleSwitchView]|
|                   |
---------------------

Create a parent view with a text label showing ON or OFF based on a Boolean state.

Create a child view with a Toggle switch that uses @Binding to update the parent's state.

When the toggle is switched, the parent's label updates immediately.

Use SwiftUI and @Binding property wrapper for communication.

Starter Code

iOS Swift

import SwiftUI

struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        VStack(spacing: 20) {
            Text(isOn ? "Switch is ON" : "Switch is OFF")
                .font(.title)

            // TODO: Add child ToggleSwitchView here
        }
        .padding()
    }
}

struct ToggleSwitchView: View {
    // TODO: Add @Binding property here

    var body: some View {
        // TODO: Add Toggle switch here
        Text("Toggle goes here")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        VStack(spacing: 20) {
            Text(isOn ? "Switch is ON" : "Switch is OFF")
                .font(.title)

            ToggleSwitchView(isOn: $isOn)
        }
        .padding()
    }
}

struct ToggleSwitchView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Toggle Switch", isOn: $isOn)
            .toggleStyle(SwitchToggleStyle(tint: .blue))
            .accessibilityLabel("Toggle switch")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ParentView()
    }
}

We use @State in the parent to hold the Boolean value isOn. The child view ToggleSwitchView declares a @Binding variable to receive a reference to this state. This allows the child to update the parent's state directly.

In the parent, we pass $isOn (the binding) to the child. The child uses this binding in the Toggle control, so when the user flips the switch, the parent's isOn updates immediately. The parent's text label reflects this change in real time.

This pattern is common in SwiftUI to let child views communicate changes back to their parents simply and reactively.

Final Result

Completed Screen

---------------------
| Toggle Switch App |
|-------------------|
| Parent View       |
|  Switch is ON     |
|                   |
| [ToggleSwitchView]|
|   [ ON / OFF ]    |
---------------------

User taps the toggle switch in the child view.

The switch changes state from OFF to ON or ON to OFF.

The parent's text label updates immediately to show the current state.

Stretch Goal

Add a text label in the child view that shows "Switch is ON" or "Switch is OFF" synchronized with the toggle.

💡 Hint

Use the same @Binding variable in the child to conditionally show the text next to the toggle.