Checkbox

Properties

Property	Type	Optional	Description
text	string	Yes	Text displayed next to the checkbox
autoFocus	boolean	Yes	When true, checkbox will be foxused when shown
checked	boolean	Yes	Weather the checkbox is checked
defaultChecked	boolean	Yes	Weather the checkbox is checked from the start
disabled	boolean	Yes	Weather the checkbox is disabled
indeterminate	boolean	Yes	"The indeterminate checked state of checkbox"
onChange	function(event)	Yes	Fires when the user changes the checkbox
isGroup	boolean	Yes	See IsGroup
options	table	Yes	See IsGroup
defaultValue	string	number[]	Yes

See more properties here.

Children

Checkbox does not support children.

Example

local checkbox = myUI:createElement("Checkbox", {
    text = "Awesome",
    defaultChecked = true,
    onChange = function(id, name, event)
        local target = event.target
        local checked = target.checked
        print("Checkbox Changed: Checked: " .. tostring(checked))
    end,
})

How it looks:

When the checkbox is clicked the onChange will print Checkbox Changed: Checked: true/false

Text

The text displayed besides the checkbox.

From the example the text is "Awesome"

AutoFocus

When true the checkbox is focused when shown to the user.

Checked

Weather the checkbox is checked.

Note when set, you will have to overwrite the onChange functionality otherwise the checkbox will stay checked or unchecked.

onChange = function(id, name, event)
    local target = event.target
    local checked = target.checked
    checkbox.checked = checked
end

onChange runs with what the value should actually be.

DefaultChecked

Weather the checkbox is checked by default.

Disabled

Weather the checkbox is disabled.

Indeterminate

"The indeterminate checked state of checkbox"

???

OnChange

Event is fired when the user checks/unchecks the checkbox.

Note when IsGroup is true the functionality changes!

Heres what it looks like normally:

IsGroup

When true options is required!

Example

local plainOptions = {"Apple", "Pear", "Orange"}
local options = {
    { label = 'Apple', value = '_apple' },
    { label = 'Pear', value = '_pear' },
    { label = 'Orange', value = '_orange' },
}
local optionsWithDisabled = {
    { label= 'Apple', value= '_apple' },
    { label= 'Pear', value= '_pear', disabled = true },
    { label= 'Orange', value= '_orange', disabled = false },
}

local checkbox1 = myUI:createElement("Checkbox", {
    isGroup = true,
    options = plainOptions,
    onChange = function(id, name, checkedValues)
        print("Checked Values: ", json.encode(checkedValues))
    end,
})
local checkbox2 = myUI:createElement("Checkbox", {
    isGroup = true,
    options = options,
    onChange = function(id, name, checkedValues)
        print("Checked Values: ", json.encode(checkedValues))
    end,
})
local checkbox3 = myUI:createElement("Checkbox", {
    isGroup = true,
    options = optionsWithDisabled,
    defaultValue = {"Apple", "Orange"},
    onChange = function(id, name, checkedValues)
        print("Checked Values: ", json.encode(checkedValues))
    end,
})

Options Properties

Property	Type	Optional	Description
label	string	Yes	Label of the entry/option
value	string	Yes	Value of the entry, what comes with onChange
disabled	boolean	Yes	Weather the entry is disabled