Mastering SwiftUI: Creating a custom checkbox toggleStyle in SwiftUI

The Toggle in SwiftUI is a commonly used component, that allows a simple, native looking toggle to flip a boolean value. But sometimes a toggle flipper just doesn’t do the job (or the UX team is adamant that you need a checkbox instead of a toggle).

SwiftUI’s toggle component is pretty powerful by itself. But utilizing a custom toggleStyle will really allow us to unlock the full power.

You could always make a custom View that takes a Boolean binding property. While this would pretty much do the same thing, you would lose some of the implied re-usability associated with the toggle.

Lets start with our base project that uses a Toggle component:

import SwiftUI

struct ContentView: View {
    @State var toggleValue: Bool = false
    
    var body: some View {
        VStack {
            Toggle(isOn: $toggleValue) {
                Text("My Toggle")
            }
        }
        .padding()
    }
}

Simple enough

Basic Toggle

Creating the ToggleStyle