checkboxgroup
This component generates a list of Checkbox component elements.
Configuration
For general configuration options, see General Component Configuration.
General Configuration
In addition to the configurations that apply to all components, the following configurations can optionally be set: //boxLabel settings, disabled, //errorTarget, icon, label, label settings, //onChange, //readOnly, required.
Custom Styling
The visual design of the checkbox groups is primarily controlled via global variables. CSS can be used specifically for certain deviations.
Using the cls , you can apply your own CSS rules.
The component provides the following standard styling targets for this purpose:
.checkboxgroup-
Styles for the checkbox group container.
.checkboxgroup-label/.checkboxgroup .label-
Direct access to the checkbox group Label. In the case of
.label, the Labels of the checkboxes in the group are automatically adjusted as well.
Example
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
"styles": {
"css": ".forms .checkboxgroup.green { background-color: rgba(205, 255, 205, 0.8)} .forms .checkboxgroup.green .checkboxgroup-label { color: rgb(0, 140, 0)} .forms .checkboxgroup.yellow { background-color: rgba(241, 236, 157, 0.8)} .forms .checkboxgroup.yellow .checkboxgroup-label { color: rgb(192, 189, 0)} .forms .checkboxgroup.orange { background-color: rgba(241, 184, 108, 0.8)} .forms .checkboxgroup.orange .checkboxgroup-label { color: rgb(202, 115, 0)} .forms .checkboxgroup.red { background-color: rgba(255, 205, 205, 0.8)} .forms .checkboxgroup.red .checkboxgroup-label { color: rgb(140, 0, 0)}"
}
},
"components": [
{
"type": "container",
"label": "Checkboxgroup Component Example",
"components": [
{
"type": "checkboxgroup",
"label": "checkbox group",
"cls": "${/data/a + /data/b + /data/c == 3 && 'green'} ${/data/a + /data/b + /data/c == 2 && 'yellow'} ${/data/a + /data/b + /data/c == 1 && 'orange'} ${/data/a + /data/b + /data/c == 0 && 'red'}",
"components": [
{
"value": "${/data/a}",
"type": "checkbox",
"label": "one"
},
{
"value": "${/data/b}",
"type": "checkbox",
"label": "two"
},
{
"value": "${/data/c}",
"type": "checkbox",
"label": "three"
}
]
}
]
}
],
"state": {
"data": {
"a": true,
"b": false,
"c": true
}
}
}