Toggle in SwiftUI

Toggles are some of the most used UIControl in iOS Apps since it lets let you switch between a binary state - true or false, 0 or 1.

You are most likely to encounter a toggle in settings or some kind of list view. But regardless of your app has settings or not, it doesn't hurt to learn about Toggle in SwiftUI. Before diving into a toggle, let's take a look at Human Interface Guideline.

Note: This is UIKit equivalent of UISwitch

Takeaways from Human Interface Guideline

  • Recommended to use it in table row only.
  • Recommended not to add a lot of labels for description.
    Source

Basic Implementation

For you to implement a basic toggle, you require a binding boolean and a string that would label the string. Let's give it a try.

 @State var isOn = false // 1
    var body: some View {
        Toggle("Airplane Mode", isOn: $isOn) // 2
            .padding()
    }

Result:

Code Explanation:

  1. Defining a bool variable isOn which is later used in the toggle init as a Binding.
  2. Displaying a toggle with initialize of label and isOn.

In the case you are looking for a custom modifier, you can go for the init with label.

@State var isOn = false
    var body: some View {
        Toggle(isOn: $isOn, label: { // 1
            Label("Airplane Mode", systemImage: "airplane") // 2
        })
            .padding()
        
    }

Result:

Code Explanation:

  1. Defining toggle with label init.
  2. Using a Label with some relevant text and airplane SF symbol.

Styling appearance

You can apply all the style modifiers that are applicable to a SwiftUI view. But there are a couple of styles which are specific to button toggle.

Eventhough, there are a couple of style which are highlight worthy. One is to use a toggle style of button (by ButtonToggleStyle) and have a button that changes the background color based on the toggle state.

           Toggle(isOn: $isOn, label: {
            Label("Airplane Mode", systemImage: "airplane")
        })
            .toggleStyle(ButtonToggleStyle())
            .foregroundColor(.orange)
            .padding()
	

Result:

Another way, which is default and the one that you are most likely to encounter is the toggle switch way where there is a switch and you can turn it off and on.

		    Toggle(isOn: $isOn, label: {
            Label("Airplane Mode", systemImage: "airplane")
        })
            .toggleStyle(SwitchToggleStyle())
            .foregroundColor(.orange)
            .padding() 	

Result:

If you have a switch and you want to change the tint color, you can do it by using tint(...) for iOS 15 and later.

struct ToggleUI: View {
    @State var isOn = false
    var body: some View {
        Toggle(isOn: $isOn, label: {
            Label("Airplane Mode", systemImage: "airplane")
        })
            .toggleStyle(SwitchToggleStyle())
            .tint(.gray)
            .foregroundColor(.orange)
            .padding()
    }
}

Result:

For iOS 15 or earlier, you can use the following style modifier:

    .toggleStyle(SwitchToggleStyle(tint: .gray))

Concluding the article, today you learned about how to integrate a toggle switch in your app and you can customize it in form of a button and change the tint color. For more updates, stay tuned by subscribing to our newsletter. Till then,

Eat. Sleep. Swift Anytime. Repeat.

You've successfully subscribed to Swift Anytime
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.