Checkbox
We can define checkbox inputs. The checkbox is a boolean input that can be checked or unchecked. It is a simple input that can be used to set a boolean value in the data.
"checkbox": {
"component": "checkbox",
"label": "Is this a checkbox"
}
as: button
If we want to, we also can display the checkbox as a button with the as property that is toggled to an active state when the value behind is true and toggled to inactive when the value behind is false. That is mainly for visual purposes as it works as a checkbox.
"button_checkbox": {
"component": "checkbox",
"label": "Checkbox with a visual style of button",
"as": "button"
}
as: switch
For other purposes we also can display the checkbox as a switch by defining it in the as property.
"switch_checkbox": {
"component": "checkbox",
"label": "Checkbox as switch",
"as": "switch"
}
Checkbox labels
By default the label defined in the label property will be shown as always (defined in basic inputs). So by default the label will be placed on the same line of the checkbox. It will also be place next to the checkbox input. So by default, the label will be repeated twice, the first in the field label place, and the second just next to the checkbox. If we wants to hide the label next to the checkbox, we can do this by setting the property showCheckboxLabel to false.
"checkbox_with_default_value": {
"component": "checkbox",
"label": "Checkbox with default value",
"showCheckboxLabel": false
}
If we want to define another label only for the checkbox input, we can do this by setting the propert checkboxLabel to the label we want to display.
"checkbox_with_two_labels": {
"component": "checkbox",
"label": "Main label for th checkbox (aligned left)",
"checkboxLabel": "Label for checkbox only (next to the checkbox)"
}
We also can remove the main label by setting it to false and only display the checkbox label.
"checkbox_with_only_checkbox_label": {
"component": "checkbox",
"label": false,
"checkboxLabel": "Label for checkbox only (next to the checkbox)"
}
And we also can show only the checkbox without any labels
"checkbox_with_no_labels": {
"component": "checkbox",
"label": false,
"showCheckboxLabel": false
}
Checkbox Image
There is a way to make a checkbox looking like a tile that haves an image on it"s center.
{
"checkbox_with_image": {
"component": "checkbox",
"label": "Image in checkbox button",
"as": "button",
"buttonProps": {
"size": "md",
"img": "https://via.placeholder.com/150"
},
"validations": [
"required"
]
}
}