Toggle Switch SwiftUI

by


In SwiftUI, you can use the Toggle view to create a switch that can be toggled on or off by the user. Here’s a basic example of how to use the Toggle view:

Toggle("Enable / Disable", isOn: $isEnabled)

Full code:

import SwiftUI

struct ContentView: View {
    @State private var isEnabled = true
    var body: some View {
        
        Toggle("Enable / Disable", isOn: $isEnabled)
        
    }
}
#Preview(){
    ContentView()
}

Output:

We can show or hide the title of the toggle switch:

 Toggle("Enable / Disable", isOn: $isEnabled)
            .labelsHidden()

We can use SF Symbol with title in Toggle Switch:

 Toggle("Enable / Disable", systemImage: "globe",  isOn: $isEnabled)

Output:

Toggle Style

Using toggleStyle, we can use Toggle Switch as button:

   Toggle("Enable / Disable", systemImage: "lightbulb",  isOn: $isEnabled)
                .toggleStyle(.button)

Output will be like this:

Content Transition

If you target iOS 17 or higher, you can use contentTransition to animate the icon inside toggle switch:

    Toggle("Enable / Disable",  systemImage: isEnabled ?  "lightbulb.fill" : "lightbulb",  isOn: $isEnabled)
                .toggleStyle(.button)
                .contentTransition(.symbolEffect)

Output:

Here is another example of Toggle Switch:

import SwiftUI

struct ContentView: View {
    @State var isEnabled = true
    var body: some View {
        VStack{
            Toggle("Enable / Disable", isOn: $isEnabled)
                .font(.title)
            
            Image(systemName: isEnabled ? "lightbulb.fill" : "lightbulb")
                .font(.system(size: 200))
                .frame(height: 300)
        }
        .padding()
    }
}
#Preview {
    ContentView()
}

Output:

Leave a Reply