# 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 |
labelFontSize |
string
|
<optional> |
Any valid CSS value |
labelFontWeight |
string
|
<optional> |
Any valid CSS value |
labelColor |
string
|
<optional> |
Any valid CSS value |
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> |
|
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
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
# setColor(color)
Change the color of the checkbox icon
Parameters:
| Name | Type | Description |
|---|---|---|
color |
string
|
The new color |
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
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 |
this
# validate() → {boolean}
Validate the field value and apply UI style accordingly
true is the field is valid, false otherwise
boolean