Components

Checkbox(iOS)

Boxes for checking and unchecking multiple values in forms.

There are 2 checkbox components, Checkbox and LabelCheckbox.

Checkbox is a square box that is empty, checked or has an intermediate state.

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

States

Empty Checkbox Empty Checkbox

let checkbox = Checkbox()

Empty LabelCheckbox Empty LabelCheckbox

let labelCheckbox = LabelCheckbox(text: "This is a label checkbox")

Checked Checkbox Checked Checkbox

let checkbox = Checkbox()
checkbox.isSelected = true

Checked LabelCheckbox Checked LabelCheckbox

let labelCheckbox = LabelCheckbox(text: "This is a label checkbox")
labelCheckbox.isSelected = true

Intermediate Checkbox Intermediate Checkbox

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

Intermediate LabelCheckbox Intermediate LabelCheckbox

let labelCheckbox = LabelCheckbox(text: "This is a label checkbox")
labelCheckbox.mark = .intermediate

Checkbox Properties

hasError

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

Error Checkbox

checkbox.hasError = true

isEnabled

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

Disabled Checkbox

checkbox.isEnabled = false

isSelected

If true, the checkbox will be checked and blue.

Checked Checkbox

checkbox.isSelected = false

mark

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

checkbox.mark = .intermediate

checkboxSize

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

checkbox.checkboxSize = 32

LabelCheckbox Properties

text

Sets the text of the label.

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

attributedText

Sets the attributed text of the label.

labelCheckbox.attributedText = attributedString

textStyle

Sets the text style of the label.

labelCheckbox.textStyle = .title1

contentInsets

Sets the content insets of the full control.

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

isEnabled

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

Disabled LabelCheckbox

labelCheckbox.isEnabled = false

isSelected

If true, the checkbox will be checked and blue.

Checked LabelCheckbox

labelCheckbox.isSelected = false

contentPlacement

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

Left LabelCheckbox

labelCheckbox.contentPlacement = .left

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.

Multiline LabelCheckbox

labelCheckbox.numberOfLines = 0
labelCheckbox.text = "This is a checkbox label text that 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.

Error LabelCheckbox

labelCheckbox.hasError = true

mark

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

labelCheckbox.mark = .intermediate

checkboxSize

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

labelCheckbox.checkboxSize = 32
Was this page helpful?

We use this feedback to improve the quality of our documentation.