Checkboxes in SwiftUI

There’s lots of good stuff in SwiftUI. One missing control is old fashioned checkbox like I have on the web or on my Mac. There is a way to make a checkbox with a Toggle control. However, as a bit of a intro to the philosophy of SwiftUI, let look at creating a checkbox.

Open up the project I have in the exercise files.  I made a second struct CheckView for the checkbox.. My checkbox needs a box. I can use the Image object in SwiftUI with the systemName parameter to get a SFSymbol from SwiftUI. 

Image(systemName: "square")

The checked square is simply the word checkmark before the square. 

Image(systemName: "checkmark.square")

I just have to switch between them. That will need some kind of variable. I’ll add this

 var isChecked:Bool = false

In SwiftUI we avoid if...then...else control structures and defer to conditional operators. I can re-write the Image like this

 Image(systemName: isChecked ? "checkmark.square" : "square")

Now if false I get a square, and if true I get a checked square. I would have to change the parameter to do that, and I could only do that once for a given checkbox. I could write a function toggle like this: 

func toggle(){isChecked = !isChecked}

But that gives me an error. Within aView, values are immutable. But you can change them by adding @State infront of the var. 

That makes this variable a state variable.

@State var isChecked:Bool = false 

Not only can you change it, but any change to it updates the view.  So anytime toggle runs, the image will change.

So how does the toggle run?  In a button, making toggle the action and make the image the label for the button.

Button(action: toggle){
   Image(systemName: isChecked ? "checkmark.square" : "square")
}

Let’s try this out. I’ll run this on an iPhone XR simulator. And I can tap the checkmark. 

Of course there’s two more things I can can do. One is make the check mark a lot bigger that that. The other is add text for a title. Text will be through another variable

var title:String 

This one won’t need a state since I’m only going to display it, not change it.  I’ll add a HStack in the button to keep the checkmark and text next to each other , then add the text. 

Button(action: toggle){ 
   HStack{ 
      Image(systemName: isChecked ? "checkmark.square" : "square")
      Text(title)
   }
}

And fix the preview to match. 

CheckView(title:"Title") 

Head over to ContentView.  Change the title  to something bigger. 

CheckView(title:"Likes Pizza")
    .font(.title)

Run again and you get a nice checkmark control, ready to use. Buttons are tap only actions in SwiftUI, but there is a lot you can do with buttons paired up with a state variable. 

The Whole Code

You’ll find code for this lesson In GitHub here. There is aslo a video of this at LinkedIn learning. But the basic check box looks like this:

 struct CheckView: View {
    @State var isChecked:Bool = false
    var title:String
    func toggle(){isChecked = !isChecked}
    var body: some View {
        Button(action: toggle){
            HStack{
                Image(systemName: isChecked ? "checkmark.square": "square")
                Text(title)
            }

        }

    }

}

By the way, that action can be reduced to a closure, so you can skip the function altogether if you wish to streamline.