Custom Toggle Styles in SwiftUI

Lose the default Toggle style in iOS. Create your own fresh toggles to suit your app’s UI

Image credit: Author

My SwiftUI quick tip for this week covers custom Toggle views! You can easily apply your own style to SwiftUI toggles by using the ToggleStyle protocol. The best part is you don't need to worry about implementing any of the backing properties of the Toggle. Simply toggle the isOn property inside the Configuration instance that's passed from the makeBody(configuration:) function.

Create a Custom ToggleStyle

Start off by creating a new struct, and make sure to inherit from the ToggleStyle Protocol. Then, implement the makeBody(configuration:) function. This is where you'll construct your custom View to be shown in place of the default switch.

import SwiftUI 

struct MyToggleStyle: ToggleStyle {
    
    func makeBody(configuration: Configuration) -> some View {
    	// Insert custom View code here.
    }
    
}

Apply your custom ToggleStyle in code to your Toggle like this. Simple as that.

Toggle(isOn: $active, label: {
	Text("Active")
})
.toggleStyle(MyToggleStyle())

Examples

Here are a few examples I cooked up while writing this tutorial. Your styles can be subtle changes or redesign the entire toggle itself. Play around with it and have fun. See what works best for the style of your app.

CheckmarkToggleStyle

PowerToggleStyle

ImageToggleStyle

Thanks for reading! Share what you made with us in the responses.