SwiftUI - Checkbox

A checkbox is a UI component which takes input from the user by providing a box in which the user can select or deselect, check or uncheck an option. We can select single as well as multiple check-boxes at the same time from the given list. It is commonly used in forms, settings, and selecting terms and conditions, permissions, etc.

SwiftUI does not provide an in-built Checkbox view. So, we have to create a custom checkbox which can take values from the user.

Creating Checkbox in SwiftUI

We can create a checkbox in SwiftUI with the help of toggle UI control. It is the easiest and fastest way to create a checkbox. Here, we create a custom style that style toggle as a checkbox. We can also reuse this style multiple times throughout the project. So to create a custom check box, follow the following steps −

Step 1: Open project

Open a new or existing project in XCode.

Step 2: Import SwiftUI

Import SwiftUI in the project.

import SwiftUI

Step 3: Define State Variable

Define a state variable using the @State property to handle the change in the boolean value of the checkbox. If the value is checked, it means true, whereas if the value is false, it means the checkbox is unchecked.

@State private var toggleValue1 = false

Step 4: Create Toggle View

Create a Toggle view that can easily apply custom style, which converts the toggle view into a checkbox.

Toggle("TransGender", isOn: $toggleValue3)
   .toggleStyle(checkBoxStyle())
   .padding(.leading, 69)

Step 5: Custom Style

Define a custom style that conforms to ToggleStyle. It changes the appearance of the Toggle view into a checkbox.

struct checkBoxStyle: ToggleStyle{
   func makeBody(configuration: Self.Configuration) -> some View {
      HStack{
         Image(systemName: configuration.isOn ? "checkmark.square" : "square")
            .resizable()
            .frame(width:26, height:26)
            .onTapGesture {configuration.isOn.toggle()
            }
         configuration.label
      }
   }
}

Step 6: Customize Checkbox

We can also style(such as font color, font style, padding, etc) the appearance of the checkbox with the help of pre-defined modifiers like .background(), .foregroundStyle(), .font(), bold(), etc.

Toggle("Female", isOn: $toggleValue2)
   .toggleStyle(checkBoxStyle())
   .padding(.leading, 20)
   .foregroundStyle(.green)

Example

The following SwiftUI program to create a checkbox.

import SwiftUI

struct ContentView: View {
   @State private var toggleValue1 = false
   @State private var toggleValue2 = false
   @State private var toggleValue3 = false
   
   var body: some View {
      VStack {
         Text("Select your gender:").font(.headline)
         Toggle("Male", isOn: $toggleValue1)
         .toggleStyle(checkBoxStyle())
         .foregroundStyle(.red)
         Toggle("Female", isOn: $toggleValue2)
         .toggleStyle(checkBoxStyle())
         .padding(.leading, 20)
         .foregroundStyle(.green)
         Toggle("TransGender", isOn: $toggleValue3)
         .toggleStyle(checkBoxStyle())
         .padding(.leading, 69)
      }
   }
}
// Custom Style for CheckBox
struct checkBoxStyle: ToggleStyle{
   func makeBody(configuration: Self.Configuration) -> some View {
      HStack{
         Image(systemName: configuration.isOn ? "checkmark.square" : "square")
            .resizable()
            .frame(width:26, height:26)
            .onTapGesture {configuration.isOn.toggle()
            }configuration.label
      }
   }
}

#Preview {
   ContentView()
}

Output