Building a Reusable Toggle Row
Create a child view that mutates parent state.
Building a Reusable Toggle Row is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
A Component That Edits
Lets build a reusable row that flips a setting. The trick: the row mutates the parents state through a @Binding. 🧩
Design the Inputs
The row needs a label to show and a binding to change. So it takes a title string and a Bool binding.
Declare the Child View
Create a struct with a plain title and a binding for the value it will toggle on and off.
struct ToggleRow: View {
let title: String
@Binding var isOn: Bool
var body: some View { Text("Placeholder") }
}Build the Body
Inside the body, a single Toggle shows the title and writes through the binding when tapped.
var body: some View {
Toggle(title, isOn: $isOn)
.padding()
}Use It in a Parent
The parent owns the setting with @State, then drops the row in and passes the value with a dollar sign.
struct SettingsView: View {
@State private var notify = true
var body: some View { ToggleRow(title: "Notify", isOn: $notify) }
}Reuse It Everywhere
Now add ten settings with ten rows, each bound to its own state. One small view, reused across the whole screen.
ToggleRow(title: "Sound", isOn: $sound)
ToggleRow(title: "Vibrate", isOn: $vibrate)Parent Sees Every Change
Flip any row and the parents matching @State updates instantly. The parent can react to the new value right away.
Text(notify ? "On" : "Off")
.foregroundStyle(notify ? .green : .gray)Keep the Child Dumb
The row holds no opinions about where data lives. It just edits the binding it was given, which makes it portable.
Add a Little Style
Because the row is one view, you can style it once and every instance looks the same. Consistency comes for free. 💅
Toggle(title, isOn: $isOn)
.tint(.orange)
.font(.headline)Swap the Type Later
Want a row for a number instead? Change the binding type and the same pattern works for any editable value.
Small Pieces, Big Apps
Reusable binding-driven rows are how real apps stay tidy. Compose many tiny editors into one clean settings screen.
Quick Check
Quick check on the toggle row.
Recap: A Reusable Editor
A child view with a @Binding becomes a reusable editor. Pass state in with the dollar sign and drop it in anywhere. 🎉
Frequently asked questions
Is the “Building a Reusable Toggle Row” lesson free?
Yes — the full text of “Building a Reusable Toggle Row” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a Reusable Toggle Row”?
Create a child view that mutates parent state. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Reusable Toggle Row” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Why Children Need @Binding
- Passing a Binding Down
- Building a Reusable Toggle Row
- @State vs @Binding