The RadioGroup component allows users to select a single option from a list of predefined values. It can be configured manually or dynamically mapped from a data source.
1. Basic Properties
- Name: The unique identifier of the radio group (e.g.,
RadioGroup1). - Label: The text displayed next to the radio group.
- Default Value: Defines which option is selected by default (e.g.,
"item1").
States
- Disabled: Prevents interaction with the radio group.
- Hidden: Hides the component from the UI while keeping it available in logic.
2. Mode
The Mode determines how the radio options are generated:
- Manual → Add items manually in the editor.
- Example:
Item 1,Item 2
- Example:
- Mapped → Dynamically populate options from a data source.
- Data Source: A query or variable returning a list of objects (e.g.,
{{ query1.data }}). - Mapped Values:
- Value → The actual value stored when an item is selected (e.g.,
{{ item.Id }}). - Label → The display text for the option (e.g.,
{{ item.Name }}). - Disabled / Hidden → Optional conditions to disable or hide specific items.
- Value → The actual value stored when an item is selected (e.g.,
- Data Source: A query or variable returning a list of objects (e.g.,
3. Layout
Defines how the radio group behaves across responsive screen sizes and spacing relative to other components.
📘 See Common Properties → Layout.
4. Events
- onChange: Triggered whenever the selected value changes.
5. Validations
Validation rules can enforce requirements, such as making the selection mandatory.
📘 See Common Properties → Validations.
6. Direction
Determines how the radio buttons are displayed:
- Horizontal → Options side by side.
- Vertical → Options stacked in a column.
7. Style
Custom styles can be applied to adjust appearance and alignment.
📘 See Common Properties → Style.
✅ With RadioGroup, you can create both static and dynamic single-choice inputs. Using Mapped Mode, the options can be directly connected to data sources, keeping the UI synchronized with live data.