fieldset
This component is a special container and thus also a "container component" for other Components.
Configuration
For general configuration options, see General Component Configuration.
Specific Configuration
type("fieldset")-
Component type.
components(array<Component>)-
List of components.
layout(enum<"vertical" | "horizontal">)-
Content alignment.
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, //onChange, readOnly, required.
Custom Styling
The visual design of the fieldsets is primarily controlled via global variables. CSS can be used specifically for certain customizations.
Using the cls , you can apply your own CSS rules.
The component provides the following standard styling points for this purpose:
.fieldset .components-
Access to the background of the subcomponents.
.fieldset-label/.fieldset .label-
Direct access to the label of the checkbox group. In the case of
.label, the Labels of the fieldsets’ subcomponents are automatically adjusted as well.
Example
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
"styles": {
"css": ".fieldset-label {color: rgb(0, 11, 170); background-color: rgb(200, 200, 255);}"
}
},
"components": [
{
"type": "fieldset",
"layout": "horizontal",
"label": "Horizontal fieldset",
"padding": 10,
"components": [
{
"type": "html",
"value": "First element in horizontal fieldset",
"flex": 1
},
{
"type": "html",
"value": "Second element in horizontal fieldset",
"flex": 1
},
{
"type": "fieldset",
"layout": "vertical",
"label": "Vertical fieldset",
"flex": 1,
"components": [
{
"type": "html",
"value": "First element in vertical fieldset"
},
{
"type": "html",
"value": "Second element in vertical fieldset"
}
]
}
]
}
]
}