Class

Checkbox

kiss.ui.Checkbox(config)

The Checkbox derives from Component.

Provides a customizable checkbox.

Constructor

# new Checkbox(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:

Create the Web Component and call its init method:

const myCheckbox = document.createElement("a-checkbox").init(config)

Or use the shorthand for it:

const myCheckbox = createCheckbox({
 text: "Check me!",
 shape: "switch"
})

myCheckbox.render()

Or directly declare the config inside a container component:

const myPanel = createPanel({
  title: "My panel",
  items: [
      {
          type: "checkbox",
          text: "Check me!",
          shape: "switch"
      }
  ]
})
myPanel.render()
Parameters:
Name Type Attributes Description
config object
label string
labelWidth string <optional>
labelPosition string <optional>

left | right | top | bottom

labelAlign string <optional>

left | right

color string <optional>
fontSize string <optional>
shape string <optional>

check | square | circle | switch | star

iconSize string <optional>
iconOn string <optional>
iconOff string <optional>
iconColorOn string <optional>
iconColorOff string <optional>
formula string <optional>
checked boolean <optional>

Default state - Can use "checked" or "value" indifferently

value boolean <optional>

Default state - Can use "checked" or "value" indifferently

width string | number <optional>
height string | number <optional>
margin string <optional>
padding string <optional>
readOnly boolean <optional>
disabled boolean <optional>

View Source client/ui/fields/checkbox.js, line 40

this

Generated markup

<a-checkbox class="a-checkbox">
 <label class="field-label"></label>
 <span class="field-checkbox-icon font-awesome-icon-class"></span>
 <input type="checkbox" class="field-checkbox">
</a-checkbox>

Methods

# getIconClasses() → {object}

Get the icon classes for each checkbox shape

View Source client/ui/fields/checkbox.js, line 200

object

# getLabel() → {string}

Get the field label

View Source client/ui/fields/checkbox.js, line 383

string

# getLabelPosition() → {string}

Get the label position

View Source client/ui/fields/checkbox.js, line 442

"left" | "right" | "top"

string

# getValue() → {boolean}

Get the field value

View Source client/ui/fields/checkbox.js, line 357

  • The field value
boolean

# setFieldWidth(width)

Set the input field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/checkbox.js, line 419

this

# setLabel(newLabel)

Set the field label

Parameters:
Name Type Description
newLabel string

View Source client/ui/fields/checkbox.js, line 393

this

# setLabelPosition(position)

Set label position

Parameters:
Name Type Description
position string

"left" (default) | "right" | "top" | "bottom"

View Source client/ui/fields/checkbox.js, line 452

this

# setLabelWidth(width)

Set the label width

Parameters:
Name Type Description
width *

View Source client/ui/fields/checkbox.js, line 431

this

# setValue(newState, rawUpdateopt)

Set the field value

Parameters:
Name Type Attributes Description
newState boolean

The new field value

rawUpdate boolean <optional>

If true, it doesn't update the associated record and doesn't trigger "change" event

View Source client/ui/fields/checkbox.js, line 308

this

# setWidth(width)

Set the field width

Parameters:
Name Type Description
width *

View Source client/ui/fields/checkbox.js, line 407

this

# toggleValue()

Toggle the value true / false

View Source client/ui/fields/checkbox.js, line 374