Checkbox(iOS)

There are 2 checkbox components, Checkbox and LabeledCheckbox.

Checkbox is a square box that is empty, checked or has an intermediate state. You normally don’t want to use it directly except for very custom UI designs that cannot be fulfilled with LabeledCheckbox.

LabeledCheckbox is a Checkbox with a Label. The label can be on the left or right side of the checkbox.

Empty Checkbox

let checkbox = Checkbox()

Empty LabeledCheckbox

let labeledCheckbox = LabeledCheckbox(text: "This is a label checkbox")

Checked Checkbox

let checkbox = Checkbox()
checkbox.isSelected = true

Checked LabeledCheckbox

let labeledCheckbox = LabeledCheckbox(text: "This is a labeled checkbox")
labeledCheckbox.isSelected = true

Intermediate Checkbox

let checkbox = Checkbox()
checkbox.mark = .intermediate

Intermediate LabeledCheckbox

let labeledCheckbox = LabeledCheckbox(text: "This is a labeled checkbox")
labeledCheckbox.mark = .intermediate

If false, the user cannot interact with the checkbox and the checkbox will be gray.

checkbox.isEnabled = false

If true, the checkbox will be checked and blue.

checkbox.isSelected = false

Defines the mark displayed inside the checkbox. Can be either empty, checked or intermediate. The default value is empty.

checkbox.mark = .intermediate

This defines the width/height of the checkbox. The checkbox always has a square shape. The default value is 20.

checkbox.checkboxSize = 32

text

Sets the text of the label.

labeledCheckbox.text = "This is a cool label checkbox!"

attributedText

Sets the attributed text of the label.

labeledCheckbox.attributedText = attributedString

textStyle

Sets the text style of the label.

labeledCheckbox.textStyle = .title1

contentInsets

Sets the content insets of the full control. The additional insets are part of the interactive area of the control.

labeledCheckbox.contentInsets = UIEdgeInsets(left: 10, top: 10, bottom: 10, right: 10)

If false, the user cannot interact with the checkbox and the control will be gray.

labeledCheckbox.isEnabled = false

If true, the checkbox will be checked and blue.

labeledCheckbox.isSelected = false

contentPlacement

Determines on what side of the checkbox the label is shown. The default value is .trailing.

labeledCheckbox.contentPlacement = .leading

numberOfLines

Determines the number of lines for the label. The default is 1. When set to 0 there will be as many lines as needed to display the full text.

labeledCheckbox.numberOfLines = 0
labeledCheckbox.text = "This is a labeled checkbox whose text will spread out over multiple lines because this text is too big to fit on one line"

hasError

I true, the checkbox and label will be red. Use this property if something’s wrong and the control needs a user’s attention.

labeledCheckbox.hasError = true

Defines the mark displayed inside the checkbox. Can be either empty, checked or intermediate. The default value is empty.

labeledCheckbox.mark = .intermediate

This defines the width/height of the checkbox. The checkbox always has a square shape. The default value is 20.

labeledCheckbox.checkboxSize = 32