How to create radio buttons and checkbox in swift (iOS)?

Question

I am developing an app that allows to do survey. My layout is generated from XML based questions.

I need to create radio buttons (single choice) and checkboxes (multiple answers). I did not find anything useful for swift.

Does anyone have an idea?

You need to create multiple buttons with background image as CheckBox image or radio button image...on click of button, change the image as selected image...should have two set of images, ie. one is selected, another for unselected.. — RJV Kumar, Mar 18 '15 at 09:06
Since Xcode/iOS don't provide checkbox/radio button , i too use what RJV's suggested. — Bista, Mar 18 '15 at 09:13
Did you try to use Cocoapods libraries for checkboxes and radio buttons? — Wimukthi Rajapaksha, Feb 19 '20 at 05:55

score 170 · Answer 1 · edited Dec 26 '22 at 03:36

170

Checkbox

You can create your own CheckBox control extending UIButton with Swift:

import UIKit

class CheckBox: UIButton {
    // Images
    let checkedImage = UIImage(named: "ic_check_box")! as UIImage
    let uncheckedImage = UIImage(named: "ic_check_box_outline_blank")! as UIImage
    
    // Bool property
    var isChecked: Bool = false {
        didSet {
            if isChecked == true {
                self.setImage(checkedImage, for: UIControl.State.normal)
            } else {
                self.setImage(uncheckedImage, for: UIControl.State.normal)
            }
        }
    }
        
    override func awakeFromNib() {
        self.addTarget(self, action:#selector(buttonClicked(sender:)), for: UIControl.Event.touchUpInside)
        self.isChecked = false
    }
        
    @objc func buttonClicked(sender: UIButton) {
        if sender == self {
            isChecked = !isChecked
        }
    }
}

And then add it to your views with Interface Builder:

Radio Buttons

Radio Buttons can be solved in a similar way.

For example, the classic gender selection Woman - Man:

import UIKit

class RadioButton: UIButton {
    var alternateButton:Array<RadioButton>?
    
    override func awakeFromNib() {
        self.layer.cornerRadius = 5
        self.layer.borderWidth = 2.0
        self.layer.masksToBounds = true
    }
    
    func unselectAlternateButtons() {
        if alternateButton != nil {
            self.isSelected = true
            
            for aButton:RadioButton in alternateButton! {
                aButton.isSelected = false
            }
        } else {
            toggleButton()
        }
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        unselectAlternateButtons()
        super.touchesBegan(touches, with: event)
    }
    
    func toggleButton() {
        self.isSelected = !isSelected
    }
    
    override var isSelected: Bool {
        didSet {
            if isSelected {
                self.layer.borderColor = Color.turquoise.cgColor
            } else {
                self.layer.borderColor = Color.grey_99.cgColor
            }
        }
    }
}

You can init your radio buttons like this:

    override func awakeFromNib() {
        self.view.layoutIfNeeded()
        
        womanRadioButton.selected = true
        manRadioButton.selected = false
    }
    
    override func viewDidLoad() {
        womanRadioButton?.alternateButton = [manRadioButton!]
        manRadioButton?.alternateButton = [womanRadioButton!]
    }

edited Dec 26 '22 at 03:36

starball

20,030
7
43
238

answered Nov 04 '15 at 10:15

crubio

6,394
4
30
33

how to show it in interface builder like this ? https://developer.apple.com/library/ios/recipes/xcode_help-IB_objects_media/Chapters/CreatingaLiveViewofaCustomObject.html – amorenew Dec 01 '15 at 15:30
1

is there any reason that you used `func buttonClicked(sender: UIButton) { if sender == self { if isChecked == true { isChecked = false } else { isChecked = true } } }` instead of: `func ButtonClicked(sender: UIButton) { if sender == self {isChecked = !isChecked} }` – Zachary May 24 '16 at 18:42
If you want to use text only then use this "✓" when check "" when unchecked. – Mohammad Zaid Pathan Jul 12 '16 at 11:09
hi crubio . for radio buttons how can I create custom class and howz its implementation@crubio – PRADIP KUMAR Jul 27 '16 at 10:10
1

for Swift 3 you need to change buttonClicked method to func buttonClicked(_ sender: UIButton) – hilzj Sep 29 '16 at 09:30
what if i have only one button in my tableview cell – SaiPavanParanam Oct 13 '16 at 08:36
1

at first run i can't see any image with my checkbox...it only appear after click...please help me – H Raval Dec 06 '16 at 11:30
@crubio How to get the Checked status from other VC ? – Nitesh Dec 13 '16 at 06:13
2

Hi @Nitesh you can get the Checked status using the public bool property isChecked, for example: if myCheckbox.isChecked { ... } – crubio Dec 13 '16 at 11:30
Why did you use sender == self?? – Mukul More Jan 03 '17 at 10:02
@MukulMore sender parameter is just to determine which button was pressed. In this case we only care about our button (checkbox) – crubio Jan 03 '17 at 15:23
@crubio i think sender == self will always be true ..can you tell me a case in which it returns false. – Mukul More Jan 04 '17 at 18:23
Yes @MukulMore it's a protection condition, the code would work without it – crubio Jan 05 '17 at 08:30
1

@Jerland2 No idea why without seeing any of your code. The boolean isChecked is connected to the image so there must be something else. – crubio Feb 16 '17 at 16:02
@crubio You are correct, rough morning missed a line of code I had in another VC that conflicted... Problem solved, thanks for a reply though! Edit: Deleted orig comment to avoid confusion for later viewers – Jerland2 Feb 16 '17 at 18:32
@crubio How to get selected button text or title? – B.Saravana Kumar Feb 02 '18 at 09:57
@B.SaravanaKumar you can use `button.titleLabel.text` – crubio Feb 02 '18 at 11:45
But I created buttons dynamically , that buttons increments based on array counts in for loop, then how to get title.. – B.Saravana Kumar Feb 02 '18 at 11:49
It might be useful to call `sendActions(for: .valueChanged)` when the checkbox changes state, so that any targets listening to that event get notified. – Nicolas Miari May 07 '18 at 11:25
Please note, that you need to add the `@objc` annotation to the `func buttonClicked( sender: UIButton)` method – rolling_codes Oct 13 '18 at 19:10
I am actually using the radiobutton in my SwiftCode, but it is actually not showing on my view...but i can see the radioButton text. I will really appreciate an insight to this pls. – Israel Meshileya Feb 09 '19 at 13:31
1

@amorenew if you are still looking for how to show in interface builder, please refer to my answer. – Mahendra Liya May 24 '20 at 14:08

score 45 · Accepted Answer · edited Aug 02 '19 at 08:15

For Radio Buttons and CheckBoxes there is nothing that comes built in.

You can implement Checkboxes easily yourself. You can set an uncheckedImage for your button for UIControlStateNormal and a checkedImage for your UIControlStateSelected. Now on tap, the button will change its image and alternate between checked and unchecked image.

To use radio buttons, you have to keep an Array for all the buttons that you want to behave as radio buttons. Whenever a button is pressed, you need to uncheck all other buttons in the array.

For radio buttons you can use SSRadioButtonsController You can create a controller object and add buttons array to it like

var radioButtonController = SSRadioButtonsController()
radioButtonController.setButtonsArray([button1!,button2!,button3!])

The main principle is something like this here.

Rashid Latif · Answer 3 · 2022-08-12T12:00:55.033

36

Swift 5, Checkbox with animation

NOTE:- if you want to remove the blue background while isSelected change the UIButton type from System to Custom

Check my Example for the Checkbox and Radio button https://github.com/rashidlatif55/CheckBoxAndRadioButton

Create an outlet for the button

@IBOutlet weak var checkBoxOutlet:UIButton!{
        didSet{
            checkBoxOutlet.setImage(UIImage(named:"unchecked"), for: .normal)
            checkBoxOutlet.setImage(UIImage(named:"checked"), for: .selected)
        }
    }

Create an extension of UIButton

extension UIButton {
    //MARK:- Animate check mark
    func checkboxAnimation(closure: @escaping () -> Void){
        guard let image = self.imageView else {return}
        
        UIView.animate(withDuration: 0.1, delay: 0.1, options: .curveLinear, animations: {
            image.transform = CGAffineTransform(scaleX: 0.85, y: 0.85)
            
        }) { (success) in
            UIView.animate(withDuration: 0.1, delay: 0, options: .curveLinear, animations: {
                self.isSelected = !self.isSelected
                //to-do
                closure()
                image.transform = .identity
            }, completion: nil)
        }
        
    }
}

How to use

 @IBAction func checkbox(_ sender: UIButton){
        sender.checkboxAnimation {
            print("I'm done")
            //here you can also track the Checked, UnChecked state with sender.isSelected
            print(sender.isSelected)
            
        }
}

edited Aug 12 '22 at 12:00

answered Dec 17 '19 at 07:28

Rashid Latif

2,809
22
26

2

I think this deserves more votes. Thanks for the elegant solution. – Carlo Jun 22 '20 at 23:49
i get a blue square when i select the button. How can i make it circular – danu Aug 08 '20 at 13:29
1

@danu to make it circle you can add this line in `didSet` ```checkBoxOutlet.layer.cornerRadius = checkBoxOutlet.frame.height / 2``` And to remove the blue `tint` when the button is selected you can add these line in extension ```self.adjustsImageWhenHighlighted = false self.isHighlighted = false``` – Rashid Latif Aug 08 '20 at 14:21
1

@danu I have created and Example for you, and provide a link in my answer. You can play with that – Rashid Latif Aug 08 '20 at 14:58
thus answer definitely deserve more up votes thanks @RashidLatif – danu Aug 09 '20 at 05:26
small thing i noticed was setting the "checkBoxOutlet.layer.cornerRadius" would not make the inner circle round (the state when u select). only making the button round – danu Aug 09 '20 at 06:56
Thank you @RashidLatif . elegant solution – Narendra Jagne Oct 13 '20 at 07:35

David Liu · Answer 4 · 2016-04-04T16:05:58.397

23

Check out DLRadioButton. You can add and customize radio buttons directly from the Interface Builder. Also works with Swift perfectly.

Update: version 1.3.2 added square buttons, also improved performance.

Update: version 1.4.4 added multiple selection option, can be used as checkbox as well.

Update: version 1.4.7 added RTL language support.

edited Apr 04 '16 at 16:05

answered Jul 01 '15 at 23:47

David Liu

16,374
12
37
38

I don't see how to use your button as checkbox? it only have radio button? – dleviathan Apr 04 '16 at 09:09
1

To use it as checkbox, you can set `multipleSelectionEnabled` and `iconSquare` to `YES`. – David Liu Apr 04 '16 at 16:04
1

Hey @DavidLiu I'm having a hard time implementing your library to swift 1.2. I'm very new to Ios apps, is your ReadMe.md skipping some basic steps? I'm very confused! – Milap Jun 01 '16 at 16:10
1

@milap Can you submit an issue and put out sample code? – David Liu Jun 01 '16 at 16:39
@DavidLiu I got it to work, just needed to add your framework to Embedded Binaries. May want to add that step for the super beginners! – Milap Jun 01 '16 at 21:13
@DavidLiu : I can't get it work. I use option 2, but starting from step 3, I don't see any of the options depicted in your screencaps. I think I'm mising something here since I'm very new to ios. And I'm not sure what Milap means by adding framework to embedded binaries. Do I still need to download .h and .m file? But I'm using swift 1.2 though. – KMC Jun 16 '16 at 02:23
Just in case anybody have hard time adding library..just follow the steps from this site - https://www.raywenderlich.com/97014/use-cocoapods-with-swift – KMC Jun 21 '16 at 19:01
How can i implement your button in tableview cell where i can use only one button per row?? Your library works only if there are multiple buttons.. but i have only one cell in my tableview. How do I make it work?? – SaiPavanParanam Oct 13 '16 at 08:17
@SaiPavanParanam Sorry, I don't quite understand your question. `DLRadioButton` should work regardless you put it in a table view cell or other `UIView`s. – David Liu Oct 13 '16 at 16:12
For all those having confusions using this library here is a well explained tutorial. https://www.simplifiedios.net/xcode-radio-button-example/ – Shaba Aafreen Jan 19 '17 at 18:10
1

This is a poorly implemented library. – ataravati Jan 16 '21 at 22:27
The RTL support don't really work because when the app is in RTL the marginWith prop don't work anymore. I do have a workaround by adding a `titleEdgeInsets` to button's title like this: `checkButton.titleEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 0,right: 10)` – Yonathan Goriachnick Jan 18 '21 at 12:10
Does not support Swift Package Manager, years on... – Rob Aug 20 '21 at 22:45

score 15 · Answer 5 · answered May 05 '20 at 13:42

Solution for Radio Button in Swift 4.2 without using third-party libraries

Create RadioButtonController.swift file and place following code in it:

import UIKit

class RadioButtonController: NSObject {
    var buttonsArray: [UIButton]! {
        didSet {
            for b in buttonsArray {
                b.setImage(UIImage(named: "radio_off"), for: .normal)
                b.setImage(UIImage(named: "radio_on"), for: .selected)
            }
        }
    }
    var selectedButton: UIButton?
    var defaultButton: UIButton = UIButton() {
        didSet {
            buttonArrayUpdated(buttonSelected: self.defaultButton)
        }
    }

    func buttonArrayUpdated(buttonSelected: UIButton) {
        for b in buttonsArray {
            if b == buttonSelected {
                selectedButton = b
                b.isSelected = true
            } else {
                b.isSelected = false
            }
        }
    }
}

Use it as below in your view controller file:

import UIKit

class CheckoutVC: UIViewController {

    @IBOutlet weak var btnPaytm: UIButton!
    @IBOutlet weak var btnOnline: UIButton!
    @IBOutlet weak var btnCOD: UIButton!

    let radioController: RadioButtonController = RadioButtonController()

    override func viewDidLoad() {
        super.viewDidLoad()

        radioController.buttonsArray = [btnPaytm,btnCOD,btnOnline]
        radioController.defaultButton = btnPaytm
    }

    @IBAction func btnPaytmAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }

    @IBAction func btnOnlineAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }

    @IBAction func btnCodAction(_ sender: UIButton) {
        radioController.buttonArrayUpdated(buttonSelected: sender)
    }
}

Be sure to add radio_off and radio_on images in Assets.

Result:

Precise!!! This was more consize answer. Out of the `RadioButtonController` instance, I used checking out the tag of `selectedButton` to distinguish what's been selected. Thanks man! — Randika Vishman, Oct 23 '20 at 21:26

score 8 · Answer 6 · answered Apr 14 '17 at 21:06

There's a really great library out there you can use for this (you can actually use this in place of UISwitch): https://github.com/Boris-Em/BEMCheckBox

Setup is easy:

BEMCheckBox *myCheckBox = [[BEMCheckBox alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
[self.view addSubview:myCheckBox];

It provides for circle and square type checkboxes

And it also does animations:

score 6 · Answer 7 · answered Oct 24 '17 at 12:30

6

shorter ios swift 4 version:

@IBAction func checkBoxBtnTapped(_ sender: UIButton) {
        if checkBoxBtn.isSelected {
            checkBoxBtn.setBackgroundImage(#imageLiteral(resourceName: "ic_signup_unchecked"), for: .normal)
        } else {
            checkBoxBtn.setBackgroundImage(#imageLiteral(resourceName: "ic_signup_checked"), for:.normal)
        }
        checkBoxBtn.isSelected = !checkBoxBtn.isSelected
    }

answered Oct 24 '17 at 12:30

Gulz

1,773
19
15

1

this answer is simple and achieves the same outcome with less code! +1 – Julian Silvestri Jan 07 '19 at 16:18

score 5 · Answer 8 · answered Nov 25 '16 at 10:27

A very simple checkbox control.

 @IBAction func btn_box(sender: UIButton) {
    if (btn_box.selected == true)
    {
        btn_box.setBackgroundImage(UIImage(named: "box"), forState: UIControlState.Normal)

            btn_box.selected = false;
    }
    else
    {
        btn_box.setBackgroundImage(UIImage(named: "checkBox"), forState: UIControlState.Normal)

        btn_box.selected = true;
    }
}

score 4 · Answer 9 · answered Oct 21 '18 at 02:23

For a checkbox, you don't need to subclass the UIButton. It already has the isSelected property to handle this.

checkbox = UIButton.init(type: .custom)
checkbox.setImage(UIImage.init(named: "iconCheckboxOutlined"), for: .normal)
checkbox.setImage(UIImage.init(named: "iconCheckboxFilled"), for: .selected)
checkbox.addTarget(self, action: #selector(self.toggleCheckboxSelection), for: .touchUpInside)

Then in the action method toggle it's isSelected state.

@objc func toggleCheckboxSelection() {
    checkbox.isSelected = !checkbox.isSelected
}

This answer is so simple without subclassing anything. Works perfectly! — liudasbar, Dec 23 '21 at 00:52

score 3 · Answer 10 · answered Aug 12 '16 at 07:00

Steps to Create Radio Button

BasicStep : take Two Button. set image for both like selected and unselected. than add action to both button. now start code

1)Create variable :

var btnTag    : Int = 0

2)In ViewDidLoad Define :

 btnTag = btnSelected.tag

3)Now In Selected Tap Action :

 @IBAction func btnSelectedTapped(sender: AnyObject) {
    btnTag = 1
    if btnTag == 1 {
      btnSelected.setImage(UIImage(named: "icon_radioSelected"), forState: .Normal)
      btnUnSelected.setImage(UIImage(named: "icon_radioUnSelected"), forState: .Normal)
     btnTag = 0
    }
}

4)Do code for UnCheck Button

 @IBAction func btnUnSelectedTapped(sender: AnyObject) {
    btnTag = 1
    if btnTag == 1 {
        btnUnSelected.setImage(UIImage(named: "icon_radioSelected"), forState: .Normal)
        btnSelected.setImage(UIImage(named: "icon_radioUnSelected"), forState: .Normal)
        btnTag = 0
    }
}

Radio Button is Ready for you

score 2 · Answer 11 · edited Nov 28 '18 at 10:28

You can simply subclass UIButton and write your own drawing code to suit your needs. I implemented a radio button like that of android using the following code. It can be used in storyboard as well.See example in Github repo

import UIKit

@IBDesignable
class SPRadioButton: UIButton {

@IBInspectable
var gap:CGFloat = 8 {
    didSet {
        self.setNeedsDisplay()
    }
}

@IBInspectable
var btnColor: UIColor = UIColor.green{
    didSet{
        self.setNeedsDisplay()
    }
}

@IBInspectable
var isOn: Bool = true{
    didSet{
        self.setNeedsDisplay()
    }
}

override func draw(_ rect: CGRect) {
    self.contentMode = .scaleAspectFill
    drawCircles(rect: rect)
}


//MARK:- Draw inner and outer circles
func drawCircles(rect: CGRect){
    var path = UIBezierPath()
    path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: rect.width, height: rect.height))

    let circleLayer = CAShapeLayer()
    circleLayer.path = path.cgPath
    circleLayer.lineWidth = 3
    circleLayer.strokeColor = btnColor.cgColor
    circleLayer.fillColor = UIColor.white.cgColor
    layer.addSublayer(circleLayer)

    if isOn {
        let innerCircleLayer = CAShapeLayer()
        let rectForInnerCircle = CGRect(x: gap, y: gap, width: rect.width - 2 * gap, height: rect.height - 2 * gap)
        innerCircleLayer.path = UIBezierPath(ovalIn: rectForInnerCircle).cgPath
        innerCircleLayer.fillColor = btnColor.cgColor
        layer.addSublayer(innerCircleLayer)
    }
    self.layer.shouldRasterize =  true
    self.layer.rasterizationScale = UIScreen.main.nativeScale
}

/*
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    isOn = !isOn
    self.setNeedsDisplay()
}
*/    

override func awakeFromNib() {
    super.awakeFromNib()
    addTarget(self, action: #selector(buttonClicked(sender:)), for: UIControl.Event.touchUpInside)
    isOn = false
}

@objc func buttonClicked(sender: UIButton) {
    if sender == self {
        isOn = !isOn
        setNeedsDisplay()
    }
}
}

score 2 · Answer 12 · answered Mar 18 '20 at 13:10

I made a super simple class to handle this in a Mac application I'm working on. Hopefully, this is helpful to someone

RadioButtonController Class:

class RadioButtonController: NSObject {

var buttonArray : [NSButton] = []
var currentleySelectedButton : NSButton?
var defaultButton : NSButton = NSButton() {
    didSet {
        buttonArrayUpdated(buttonSelected: self.defaultButton)
    }
}

func buttonArrayUpdated(buttonSelected : NSButton) {
    for button in buttonArray {
        if button == buttonSelected {
            currentleySelectedButton = button
            button.state = .on
        } else {
            button.state = .off
        }
    }
}

}

Implementation in View Controller:

class OnboardingDefaultLaunchConfiguration: NSViewController {

let radioButtonController : RadioButtonController = RadioButtonController()
@IBOutlet weak var firstRadioButton: NSButton!
@IBOutlet weak var secondRadioButton: NSButton!

@IBAction func folderRadioButtonSelected(_ sender: Any) {
    radioButtonController.buttonArrayUpdated(buttonSelected: folderGroupRadioButton)
}

@IBAction func fileListRadioButtonSelected(_ sender: Any) {
    radioButtonController.buttonArrayUpdated(buttonSelected: fileListRadioButton)
}

override func viewDidLoad() {
    super.viewDidLoad()
    radioButtonController.buttonArray = [firstRadioButton, secondRadioButton]
    radioButtonController.defaultButton = firstRadioButton
}

}

score 1 · Answer 13 · answered Feb 08 '19 at 14:39

For checkboxes there is actually a built-in solution in the form of UITableViewCell accessories. You can set up your form as a UITableView in which each cell as a selectable option and use accessoryType to set a check mark for selected items.

Here is a pseudo-code example:

    let items = [SelectableItem]

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {


        // Get the item for the current row
        let item = self.items[indexPath.row]

        // ...dequeue and set up the `cell` as you wish...

        // Use accessoryType property to mark the row as checked or not...
        cell.accessoryType = item.selected ? .checkmark : .none
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        // Unselect row
        tableView.deselectRow(at: indexPath, animated: false)

        // Toggle selection
        let item = self.items[indexPath.row]
        item.selected = !item.selected
        tableView.reloadData()
    }

Radio buttons however do require a custom implementation, see the other answers.

score 1 · Answer 14 · edited May 09 '19 at 19:05

The decision of checking or unchecking the checkbox button is something out of the scope of the view. View itself should only take care of drawing the elements, not deciding about the internal state of that. My suggested implementation is as follows:

import UIKit

class Checkbox: UIButton {

    let checkedImage = UIImage(named: "checked")
    let uncheckedImage = UIImage(named: "uncheked")
    var action: ((Bool) -> Void)? = nil

    private(set) var isChecked: Bool = false {
        didSet{
            self.setImage(
                self.isChecked ? self.checkedImage : self.uncheckedImage,
                for: .normal
            )
        }
    }

    override func awakeFromNib() {
        self.addTarget(
            self,
            action:#selector(buttonClicked(sender:)),
            for: .touchUpInside
        )
        self.isChecked = false
    }

    @objc func buttonClicked(sender: UIButton) {
        if sender == self {
            self.action?(!self.isChecked)
        }
    }

    func update(checked: Bool) {
        self.isChecked = checked
    }
}

It can be used with Interface Builder or programmatically. The usage of the view could be as the following example:

let checkbox_field = Checkbox(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
checkbox_field.action = { [weak checkbox_field] checked in
    // any further checks and business logic could be done here
    checkbox_field?.update(checked: checked)
}

score 1 · Answer 15 · edited Jan 05 '20 at 10:35

I don't have enough reputation to comment, so I'll leave my version of Salil Dwahan's version here. Works for Swift 5, XCode 11.3.

First place your button on IB, select type "Custom" and create an outlet and an action with the Assistant Layout (Ctrl + Drag). Include the following code and it should end like this:

class YourViewController: UIViewController {
    @IBOutlet weak var checkbox: UIButton!
    @IBAction func checkboxTapped(_ sender: UIButton) {
        checkbox.isSelected = !checkbox.isSelected
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        checkbox.setImage(UIImage.init(named: "checkMark"), for: .selected)
    }
}

Don't forget to add the image to Assets and change the name to match!

checkbox.isSelected is the way to check

score 1 · Answer 16 · answered May 24 '20 at 14:06

Though some of the answers mention it rightly that we can use the Selected State to set an image for Selected state of the button, it won't work elegantly when the button has to have both image and text.

Like many, I ended by subclassing UIButton; however, added support for setting images from Interface Builder.

Below is my code:

import UIKit

class CustomCheckbox: UIButton {

    @IBInspectable var defaultStateImage: UIImage? = nil {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var selectedStateImage: UIImage? = nil {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var gapPadding: CGFloat = 0 {
        didSet{
            self.setNeedsDisplay()
        }
    }

    @IBInspectable var isChecked: Bool = false {
        didSet{
            self.setNeedsDisplay()
        }
    }

    var defaultImageView: UIImageView? = nil
    var selectedImageView: UIImageView? = nil

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        setup()
    }

    func setup() {
        if(defaultStateImage != nil) {
            defaultImageView = UIImageView(image: defaultStateImage)
            defaultImageView?.translatesAutoresizingMaskIntoConstraints = false

            addSubview(defaultImageView!)

            let length = CGFloat(16)
            titleEdgeInsets.left += length

            NSLayoutConstraint.activate([
                defaultImageView!.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: -gapPadding),
                defaultImageView!.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
                defaultImageView!.widthAnchor.constraint(equalToConstant: length),
                defaultImageView!.heightAnchor.constraint(equalToConstant: length)
            ])
        }

        if(selectedStateImage != nil) {
            selectedImageView = UIImageView(image: selectedStateImage)
            selectedImageView!.translatesAutoresizingMaskIntoConstraints = false

            addSubview(selectedImageView!)

            let length = CGFloat(16)
            titleEdgeInsets.left += length

            NSLayoutConstraint.activate([
                selectedImageView!.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: -gapPadding),
                selectedImageView!.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
                selectedImageView!.widthAnchor.constraint(equalToConstant: length),
                selectedImageView!.heightAnchor.constraint(equalToConstant: length)
            ])
        }

        if defaultImageView != nil {
            defaultImageView!.isHidden = isChecked
        }

        if selectedImageView != nil  {
            selectedImageView!.isHidden = !isChecked
        }

        self.addTarget(self, action: #selector(checkChanged(_:)), for: .touchUpInside)
    }

    @objc func checkChanged(_ btn : UIButton){
        self.isChecked = !self.isChecked

        if defaultImageView != nil {
            defaultImageView!.isHidden = isChecked
        }

        if selectedImageView != nil  {
            selectedImageView!.isHidden = !isChecked
        }
    }
}

score 0 · Answer 17 · edited Feb 04 '19 at 07:26

Create 2 buttons one as "YES" and another as "NO".
Create a BOOL property Ex: isNRICitizen = false
Give same button connection to both the buttons and set a tag (Ex: Yes button - tag 10 and No button -tag 20)

@IBAction func btnAction(_ sender:UIButton) {

isNRICitizen = sender.tag == 10 ? true : false
isNRICitizen ? self.nriCitizenBtnYes.setImage(#imageLiteral(resourceName: "radioChecked"), for: .normal) : self.nriCitizenBtnYes.setImage(#imageLiteral(resourceName: "radioUnchecked"), for: .normal)
        isNRICitizen ? self.nriCitizenBtnNo.setImage(#imageLiteral(resourceName: "radioUnchecked"), for: .normal) : self.nriCitizenBtnNo.setImage(#imageLiteral(resourceName: "radioChecked"), for: .normal)
}

score 0 · Answer 18 · answered Nov 28 '19 at 10:11

Swift 5.0 Updated Simple RadioButton For Swift (No Library)

First set images to button One Checked and Second Unchecked.

Then Provide 2 Outlet Of RadioButton.

@IBOutlet weak var radioMale: UIButton!
@IBOutlet weak var radioFemale: UIButton!

Create IBAction With Both Button Action in One Method.

 @IBAction func btnRadioTapped(_ sender: UIButton) {

    radioMale.setImage(UIImage(named: "Unchecked"), for: .normal)
    radioFemale.setImage(UIImage(named: "Unchecked"), for: .normal)

    if sender.currentImage == UIImage(named: "Unchecked"){

        sender.setImage(UIImage(named: "Checked"), for: .normal)

    }else{

        sender.setImage(UIImage(named: "Unchecked"), for: .normal)
    }

}

score 0 · Answer 19 · answered Aug 24 '21 at 05:41

Couldn't find an easy SwiftUI version in this thread so here is a quick component using SF symbols.

struct CheckBox: View {

  private let checked = Image("checkmark.square.fill")
  private let unChecked = Image("checkmark.square")
  @State private var isChecked: Bool = false

  var body: some View {
      ZStack {
          isChecked == false ? unChecked : checked
       }.onTapGesture {
          isChecked.toggle()
       }   
   }
}

score 0 · Answer 20 · answered Sep 15 '22 at 22:17

If you use Image when change state. Try this:

 var nightButtonState: Bool = false {
     didSet {
         nightButtonState ? autoNightButton.setBackgroundImage(UIImage(named: "unchecked_icon"), for: .normal) : autoNightButton.setBackgroundImage(UIImage(named: "checked_icon"), for: .normal)
     } 
  }

Button action:

@IBAction func autoNightButtonAction(_ sender: UIButton) {
  self.nightButtonState.toggle()
}

How to create radio buttons and checkbox in swift (iOS)?

20 Answers20

Linked

Related