Create a Toggle Button in SwiftUI

Written by Team Kodeco

Toggle buttons are integral components in many user interfaces, allowing users to switch between two states, often representing an on/off or true/false choice. SwiftUI, with its declarative syntax, makes creating such interactive elements incredibly straightforward. Let’s dive in and learn how to create a toggle button using SwiftUI.

In SwiftUI, a Toggle is a UI control that can be turned on (true) or off (false). It binds to a variable in your code that represents its current state. To create and customize a toggle, consider the following code snippet:

struct ContentView: View {
  @State private var isOn = false

  var body: some View {
    Toggle(isOn: $isOn) {
      Text("Switch state")
    }
    .toggleStyle(.switch)
    .padding()
  }
}

Your preview should look like this:

Here’s what this code is doing:

• @State private var isOn = false defines a state variable isOn and set its initial value to false. @State is a property wrapper provided by SwiftUI. It tells SwiftUI that this piece of data is a source of truth for the view. When the state changes, the view should be re-rendered. Think of @State as a caretaker who monitors a specific property and alerts SwiftUI to make necessary updates whenever that property changes.

• Toggle(isOn: $isOn) { Text("Switch state") } create as Toggle view. This view binds to the isOn state variable, creating a two-way binding. In SwiftUI, the $ prefix before a variable name creates this two-way binding to a state variable, which means the user interface can change the variable’s value, and vice versa. The Toggle view has a label "Switch state".

• .toggleStyle(.switch) styles your toggle to look like a classic iOS switch.

• .padding() adds space around the entire toggle control, providing a more comfortable touch target and better visual separation from other interface elements.

Modifying the Appearance of a Toggle

In SwiftUI, you can modify the appearance of a Toggle view by using the .toggleStyle() modifier. The built-in toggle styles in SwiftUI include:

• DefaultToggleStyle: This is the default style that SwiftUI uses when no other style is specified. It changes appearance depending on the platform. On iOS, it appears as a switch, while on macOS, it appears as a checkbox. This style is useful when you want your toggle to automatically match the platform’s conventions.

• SwitchToggleStyle: This style makes your toggle look like a classic iOS switch, regardless of the platform. It’s a good choice when you want to keep the same appearance across different platforms or when you specifically want the iOS switch look.

• CheckboxToggleStyle: This style makes your toggle appear as a checkbox. This is typically used on macOS, but can be used on iOS if you prefer a checkbox appearance over the switch.

• ButtonToggleStyle: This style presents the toggle as a button that shows its on/off status. This style can be beneficial when you want the user to acknowledge the action they’re performing each time they change the toggle’s state.

• PickToggleStyle: This style presents the toggle as a picker. You might use this style if you have multiple options that are mutually exclusive.

In addition to these built-in styles, you can also create your own custom toggle styles by conforming to the ToggleStyle protocol. This gives you full control over the toggle’s appearance and interaction.

So, there you have it! That’s how to create a toggle button in SwiftUI. Always remember that the key is to bind your Toggle to a @State variable. SwiftUI will take care of the rest, re-rendering your UI whenever the state changes. Happy toggling!