radiogroup
This component allows exactly one option to be selected from a group of options.
Configuration
For general configuration options, see General Component Configuration.
Specific Configuration
type("radiogroup")-
Component type.
options(array<Radio>)-
A list of radio elements from which You can select a value.
value(Binding | number)-
Value of the selected element.
General Configuration
In addition to the configurations that apply to all elements, 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 radio groups is primarily controlled via global variables. CSS can be used specifically for certain deviations.
Using the attribute cls , you can apply your own CSS rules.
The component provides the following standard styling targets for this purpose:
.radiogroup-
Styles for the radio group container.
.radiogroup-label/.radiogroup .label-
Direct access to the radio group label. In the case of
.label, the Labels of the radio elements in the group are automatically adjusted accordingly.
Radio
This element is part of a radio group. It therefore has no type and can only be used within a radio group.
General Configuration
In addition to the configurations that apply to all elements, the following configurations can be set optionally: boxLabel settings, disabled, //errorTarget, icon, label, label settings. //onChange, //readOnly, //required.
Custom Styling
The visual design of the radio elements 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:
.radio-
Styles for the container of the radio elements.
.radio-label/.radio .label-
Direct access to the Label of radio elements.
.radiogroup .radio div:has(.value)-
Access to the input element of radio buttons.
Example
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
"styles": {
"css": ".radiogroup.green { background-color: rgba(205, 255, 205, 0.8)} .radio.green div:has(.value) { color: rgb(0, 140, 0)} .radiogroup.yellow { background-color: rgba(241, 236, 157, 0.8)} .radio.yellow div:has(.value) { color: rgb(192, 189, 0)} .radiogroup.red { background-color: rgba(255, 205, 205, 0.8)} .radio.red div:has(.value) { color: rgb(140, 0, 0)}"
}
},
"components": [
{
"type": "container",
"label": "Radiogroup Component Example",
"components": [
{
"type": "radiogroup",
"label": "Radiogroup",
"value": "${/data/radioGroup}",
"cls": "${/data/radioGroup == 3 && 'green'} ${/data/radioGroup == 2 && 'yellow'} ${/data/radioGroup == 1 && 'red'}",
"options": [
{ "value": 1, "label": "one", "cls": "${/data/radioGroup == 1 && 'red'}" },
{ "value": 2, "label": "two", "cls": "${/data/radioGroup == 2 && 'yellow'}" },
{ "value": 3, "label": "three", "cls": "${/data/radioGroup == 3 && 'green'}" }
]
}
]
}
],
"state": {
"data": {
"radioGroup": 2
}
}
}