The Radio Group element is a classic radio button-based selection element that allows users to select only a single option from a group of options. The options are listed under the same group, and when one option is selected, the selection of the other options is automatically deselected.
The Radio Group element is supported only in web applications.
1.1. Common Use Cases
Form fields requiring a single selection
Survey and evaluation questions (single-answer)
Selecting between alternatives on settings screens
Fields for determining status, preference, or category
Selecting a single criterion in filtering scenarios
2. Key Features
Single-select support: The user can select only one option at a time; when a new selection is made, the previous selection is automatically deselected.
Classic radio button interface: Options are listed vertically or horizontally and provide a look that aligns with form layouts.
Static and dynamic option support: Options can be defined statically or generated dynamically via data sources.
2.1. Radio Group Element Properties
Value: You can add a static value or use the Symbol Picker to dynamically display the content of another element or the result of an action.
Options: Defines the list of options to be presented within the Radio Group.
Direction: Determines whether the Radio Buttons are displayed horizontally or vertically.
Space: You can adjust the spacing between options (in px). The default value is 0.
Selected Radio Color: Sets the background color of the radio button selected by the user.
Unselected Radio Color: Sets the background color of the unselected radio buttons.
Multi Selectable: Determines whether users can select more than one option at the same time. By default, only a single selection is allowed; when enabled, multiple options can be selected.
2.2. Actions That Can Be Added to the Element
The Radio Group element supports triggering event-based actions based on the user’s single selection. Actions are not tied to the element itself but to the event triggered when the user changes their selection.
Actions for the Radio Group element can be defined via the following event through the Properties > Add Action section.
Supported Action Trigger
onChange: Triggered when the user changes the option within the Radio Group.
Use cases:
Save the selected value to a state or variable
Toggle the visibility of fields based on the selection
Update the form flow or steps
Trigger filtering or sorting operations
Save the selection by making an API or workflow call
Example scenario: When the user selects a different option in the “Payment Type” field, card information or billing fields are dynamically updated based on the selection.
Basic Rules Regarding Actions
The Radio Group element can trigger actions only via the onChange event.
The onChange event fires with every selection change.
Multiple actions can be defined for the same onChange event.
The Radio Group element offers a simple and user-friendly experience when used with actions, particularly in form scenarios, setting selections, and single-criterion filtering.
3. How to Use the Radio Group Element?
In this section, we will cover the end-to-end usage of the Radio Group element through an example scenario.
Scenario: Payment Method Selection
When completing an order, the user uses the MultiSelect element to specify their preferred payment methods. With MultiSelect, the user can select one or more payment methods simultaneously from the listed options.
In the scenario:
A MultiSelect field representing different payment options appears on the screen. The user can select the payment methods that suit them from the following options:
Credit Card
Bank Transfer / EFT
Cash on Delivery
When the user selects one or more options, the selected values are displayed within the field as labels (tags). If desired, the user can remove the selected payment methods or add different options.
This structure allows users to make selections quickly and clearly when they need to choose one or more options from a list. The MultiSelect element provides flexibility, especially in scenarios where multiple options must be presented to the user simultaneously.
Step 1 - Creating a Data Source
Creating a table in the DataSources module:
Go to the DataSources module.
Then go to the Tables tab.
Create a new table named “PaymentPreferences”.
The table structure to be created is as follows:
Important Field Names:
Id: Represents the user selecting the payment method. Records are created or updated based on the Current User ID.
PaymentMethod: Stores the payment method selected by the user (Credit Card, Bank Transfer/EFT, Cash on Delivery, etc.)
Create a new table named “PaymentTypes”.
The required table structure is as follows:
Important Field Names:
PaymentTypeName: Stores the list of payment methods (Credit Card, Bank Transfer/EFT, Cash on Delivery, etc.)
Step 2 - Defining the Required Action
To display data on the interface:
You must define a sample action.
Add a new action via the Actions > New SQL Action tab within the Datasources module.
Action to Save Tags (InsertPaymentTypes): To test the application with sample data, add the following SQL action and click the TEST button.
INSERT INTO PaymentTypes (Id, PaymentTypeName)
VALUES
(NEWID(), N'Credit Card'),
(NEWID(), N'Bank Transfer / EFT'),
(NEWID(), N'Cash on Delivery')
When applying, delete the PaymentTypes part, type PaymentTypes again, and press Enter. This will ensure the correct schema name is prepended to the table name.
Action to List Tags (PaymentTypes):
SELECT * FROM PaymentTypes
When executing, delete the “PaymentTypes” part, type “PaymentTypes” again, and press Enter. This will ensure the correct schema name is prepended to the table name.
Action to List Saved Tags (PaymentPreferencesAll):
SELECT * FROM PaymentPreferences
When executing, delete the “PaymentPreferences” part, type “PaymentPreferences” again, and press Enter. This will add the correct schema name before the table name.
Action to Retrieve the Default Preference (PaymentPreferencesValue):
SELECT * FROM PaymentPreferences WHERE id = @CurentUserid
When applying this, delete the “PaymentPreferences” part, type “PaymentPreferences” again, and press Enter. This will add the correct schema name before the table name. Set the CurentUserid parameter type to Guid.
Step 3 - Adding an Initial Action
On the home page at startup:
To display the labels within the Radio Group, add the Add Action > Initial Action > Custom > Managed DB > PaymentTypes action.
To monitor the creation and update operations of Radio Group preferences on the selection screen, add the Add Action > Initial Action > Custom > Managed DB > PaymentPreferencesAll action.
To ensure preferences are selected by default on the opening screen, add the Add Action > Initial Action > Custom > Managed DB > PaymentPreferencesValue action.
Within the PaymentPreferencesValue action, define CurrentUserid > Default > User > Current Userid.
Step 4 - Adding the Radio Group Element and Defining Actions
Initially on the homepage:
Drag and drop the Elements > Display > Label element from the left sidebar onto the page to specify the field name.
Set the text to Label > Properties > Value > “Select Your Preferred Payment Types:”.
Drag and drop the Elements > Select Input > RadioGroup element below it.
To dynamically list the options, configure RadioGroup > Properties > Options > PaymentTypes. Set the fields to Field to display > PaymentTypeName and Field to Use as Key > Id.
To display the selected value by default, configure RadioGroup > Properties > Value > Action Results > PaymentPreferencesValue > First > PaymentMethod.
Set the spacing between options to RadioGroup > Properties > Space > 10.
To enable multiple selections, set RadioGroup > Properties > MultiSelectable > On.
Add the RadioGroup > Properties > onChange > ManagedDb > Save Record action to save the record after the payment method is selected.
In the Save Record action, select the Select Table > PaymentPreferences table and choose PaymentMethod in the Columns field.
Set the PaymentMethod field to Components > RadioGroup > value.
This field can also be populated using the ID (Id) based on your usage requirements. The resulting values will be returned as a single comma-separated string. For example: id1,id2,id3 or typename1, typename2, typename3.
Set the Id field to Default > User > Current Userid.
To update the selection on the screen after the preference is set, add the RadioGroup > Properties > Add Action > onChange > Custom > Managed DB > PaymentPreferencesAll action.
To display the selections on the screen, click the Action Tree field in the left sidebar and drag the icon next to the PaymentPreferencesAll action onto the page.
In the opened screen, make the following definitions.
The final screen should look like this:
Preview:
In this example, a Radio Group structure is used to allow users to select multiple payment preferences. The user can select one or more payment methods from the options listed on the screen: Cash on Delivery, Bank Transfer / EFT, and Credit Card.
After the user makes a selection, the selected payment types are saved to the system. In the structure, the Id field represents the user’s record ID; thus, if no record exists for the relevant user, a new record is created, and if an existing record exists, it is updated based on the selected payment types.
The selected payment methods are stored in the Payment method field, separated by commas, and displayed in the table below. Changes made when the user selects or deselects different payment options are immediately visible in the table.
4. Common Properties
Some fields on the Radio Group element are shared across all UI elements. Therefore, detailed descriptions of the following properties can be found in the relevant general guide pages:
