Make App Pie
iOS Training from beginner to advanced
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.
Make App Pie 
Pingback: Checklists in Swift UI – Make App Pie
Added the ability to respond to the interaction like a button.
public struct CheckBox: View {
public typealias UserInteraction = (Bool) -> ()
public var title: String
@State public var isChecked: Bool = false
public var changed: UserInteraction
private func toggle(){
isChecked = !isChecked
changed(isChecked)
}
public var body: some View {
Button(action: toggle){
HStack{
Image(systemName: isChecked ? “checkmark.square”: “square”)
Text(title)
}
}
}
}