Checkbox list
Another way of selecting items with a list is to define a checkbox list component. It will generate a list of checkboxes for the user. This one also handle the inlineOptions property in order to show the checkboxes on the same line. Note that the checkbox item returns a boolean, so the value of the component checkbox_list will be an object with as keys the value of the option, and his value, a boolean for if the checkbox is checked or not. Also note that if no checkbox have been touched, the pair of value / boolean will not be in the value of the component.
Example : List from constant
"which_one": {
"component": "checkbox_list",
"label": "Which one ?",
"list": {
"from": "constants.list_a"
}
}
Simple Example
"which_one": {
"component": "checkbox_list",
"label": "Which one ?",
"list": [
{
"value": "option_1",
"label": "Option 1",
},
{
"value": "option_2",
"label": "Option 2",
}
]
}
In this example, if the user only checks the option_1 checkbox, the data will looks like :
{
"which_one": {
"option_1": true
}
}
And if he check, and uncheck the option_2, the data will be :
{
"which_one": {
"option_1": true,
"option_2": false
}
}
"which_one": {
"component": "checkbox_list",
"label": "Which one ?",
"as": "button",
"list": {
"from": "constants.list_a"
}
}
For visual purpose we can give a design of a button that can be selected by clicking on it by setting the property as to button.
Example : As button
"which_one_as_button_with_modifiers": {
"component": "checkbox_list",
"label": "Which one ?",
"as": "button",
"buttonProps": {
"size": "lg"
},
"list": [
{
"value": "this_one",
"label": "This one"
},
{
"value": "this_other_one",
"label": "This other one"
},
{
"value": "this_extra_one",
"label": "This extra one",
"buttonProps": {
"color": "danger",
"block": true
}
}
]
},
Button properties can be defined with the buttonProps property, only used when the property as is button.
If the property buttonProps is defined on the main component, all the buttons will inherit of those properties. We also can set specific buttonProps on an option item of the list. That way the buttonProps defined on the option item will override the buttonProps of the component. In the example above, the button for this_one and this_other_one will be of size lg. But the button for the value this_extra_one will take as much as space possible and be in red, but will be in size of lg defined by the component. Note that we also can set an image in the center of the button, for this, the property buttonProps.img should be defined, and it takes as value a valid url to the image that the user wants in the button.
"which_one": {
"component": "checkbox_list",
"label": "Which one ?",
"as": "switch",
"list": {
"from": "constants.list_a"
}
}
We also can set the design of the checkbox to look like a switch by defining the as property to switch