A custom `ToggleStyle` that presents a SwiftUI `Toggle` as a checkbox.

CheckboxToggleStyle.swift

//
//  CheckboxToggleStyle.swift
//
//  Created by Felix Mau on 25.05.2021.
//  Copyright © 2021 Felix Mau. All rights reserved.
//

import SwiftUI

// MARK: - Config

private enum Config {
  static let iconSize: CGFloat = 22
  static let animationDuration: TimeInterval = 0.15

  enum SystemImageName {
    static let on = "checkmark.circle"
    static let off = "circle"
  }
}

/// A custom `ToggleStyle` that presents a SwiftUI `Toggle` as a checkbox.
struct CheckboxToggleStyle: ToggleStyle {

  // MARK: - Public Properties

  let onColor: Color
  let offColor: Color

  // MARK: - Initializer

  init(onColor: Color = .blue, offColor: Color = .gray) {
    self.onColor = onColor
    self.offColor = offColor
  }

  // MARK: - Public Methods

  func makeBody(configuration: Configuration) -> some View {
    HStack {
      configuration.label

      Spacer()

      ZStack {
        Image(systemName: Config.SystemImageName.off)
          .resizable()
          .foregroundColor(offColor)

        Image(systemName: Config.SystemImageName.on)
          .resizable()
          .foregroundColor(onColor)
          // Toggling opacity is the easiest way to animate
          // the image transition.
          .opacity(configuration.isOn ? 1 : 0)
      }
      .frame(width: Config.iconSize, height: Config.iconSize)
      .animation(.easeInOut(duration: Config.animationDuration))
    }
    .onTapGesture {
      configuration.isOn.toggle()
    }
  }
}

Example Code

struct ContentView: View {

  // MARK: - Private Properties

  @State
  private var isOriginalToggleOn = false

  @State
  private var isCustomToggleOn = false

  // MARK: - Render

  var body: some View {
    List {
      Section(header: Text("Checkbox Toggle Style")) {
        Toggle("Original Toggle", isOn: $isOriginalToggleOn)

        Toggle("Custom Toggle", isOn: $isCustomToggleOn)
          .toggleStyle(CheckboxToggleStyle())
      }
    }
    .listStyle(InsetGroupedListStyle())
  }
}

The code above will produce the following result.

Dark-Mode / Off-State	Light-Mode / On-State