Create a checkbox with a toggle

The iOS UX doesn’t have a checkbox and it makes sense for the mobile application. The behaviour is created using the toggle, but suppose that you need a visual effect different from the custom toggle — then it’s possible as I already displayed in another post. But in this one I want to display how to create an action where no object is moved to display the change of status.

A way to do this is to use the button property for the toggle style:

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

        var body: some View {
            VStack {
                Toggle(isOn: $isChecked) {
                    Text("Toggle")
                }
                .toggleStyle(.button) 
            }
            .padding()
        }
}

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

        var body: some View {
            VStack {
                Toggle(isOn: $isChecked) {
                    Text("Toggle")
                }
                .toggleStyle(.button) 
            }
            .padding()
        }
}

In this way, a toggle button is created:

When the button is untoggled, the background disappears.

It’s nice, but we can also create something different, like this:

Here we change the circle’s color to mimic a checkbox. This effect can look nice in some coloured interfaces.

Have a look at the code:

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

        var body: some View {
            VStack {
                Toggle(isOn: $isChecked) {
                }
                .toggleStyle(CustomToggleStyle())
            }
            .padding()
        }
}

struct CustomToggleStyle: ToggleStyle {
    var activeColor: Color = .cyan
    var inactiveColor: Color = Color(.systemGray4)
    var inactiveTextColor: Color = Color(.systemGray3)
    var activeTextColor: Color = Color(.systemGray2)
    @State var textToggle = "Select this option"
    
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Text(textToggle)
                .foregroundStyle(configuration.isOn ? activeTextColor : Color(inactiveTextColor))
            Spacer()
            Circle()
                .fill(configuration.isOn ? activeColor : Color(inactiveColor))
                .padding(3)
                .frame(width: 40, height: 40)
                .onTapGesture {
                    withAnimation(.spring) {
                        configuration.isOn.toggle()
                        
                    }
                }
        }
    }
}

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

        var body: some View {
            VStack {
                Toggle(isOn: $isChecked) {
                }
                .toggleStyle(CustomToggleStyle())
            }
            .padding()
        }
}

struct CustomToggleStyle: ToggleStyle {
    var activeColor: Color = .cyan
    var inactiveColor: Color = Color(.systemGray4)
    var inactiveTextColor: Color = Color(.systemGray3)
    var activeTextColor: Color = Color(.systemGray2)
    @State var textToggle = "Select this option"
    
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Text(textToggle)
                .foregroundStyle(configuration.isOn ? activeTextColor : Color(inactiveTextColor))
            Spacer()
            Circle()
                .fill(configuration.isOn ? activeColor : Color(inactiveColor))
                .padding(3)
                .frame(width: 40, height: 40)
                .onTapGesture {
                    withAnimation(.spring) {
                        configuration.isOn.toggle()
                        
                    }
                }
        }
    }
}

We define a CustomToggleStyle to customize the toggle’s appearance as shown in the image above. The makeBody function receives a configuration parameter, which provides the toggle’s current boolean state. We use this state to determine how the toggle should be rendered.