Radio Group Component
The Radio Group component allows learners to select one option from a radio group and submit their answer. The submitted answer can be saved to a variable as needed.
This article provides an overview of the Radio Group component, component setup and behavior, and examples of Radio Group component configurations.
The Radio Group component is an interactive component that lets your learners select one option from a radio group. The Radio group component is flexible and the label and value for each radio group option can be set independently. With the configuration set to Allow Editing, the learner can edit their submitted answer after submitting an answer. The submitted answer can also be saved to a variable, as needed.
The Radio Group component is fully responsive.
Component set up
Follow these steps to add the Radio Group component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Radio Group component.
- Click the Radio Group component and select Add Left, Add Full, or Add Right.
Click the Edit Component icon on the newly added Radio Group component to begin set up.
In the General section:
Add Radio Group Title, or a Radio Group Display Title, as needed. Radio Group Display Title is seen by learners.
Scroll down and add your Radio Group Body. Use the text editor to style and format your text, as needed.
- Add Radio Group Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Radio Group component that can display an icon and label prior to the Radio Group component completion, which changes to a different icon and label once the Radio Group component is completed.
Radio Group section
- In the Radio Group section, you set the number of Columns to your Radio Group component. This is set to three columns for desktops, two columns for tablets, and one column for mobiles.
- Enter Submit Button Text that will be shown on the submit button.
If the Submit Button Text field is left blank, the submit button will be hidden and the answer will be submitted automatically when an option is selected.
- Scroll down and enter Submitted Label Text that will be displayed once the button has been clicked and the answer has been submitted.
- Toggle to Allow Editing. Enabling this setting allows the learner to edit the answer after submitting it.
- Enter Edit Button text, as needed.
The Radio Group component gives you a lot of flexibility. Below are examples that illustrate the Radio Group component setup:
Example 1 – displays the Radio Group component before an option has been selected and submitted.
Example 2 – displays the Radio Group component after submitting an answer. The Submitted Label Text is shown and, in this example, the setting Allow Editing is enabled. The Edit Button is displayed below the component.
Radio Options section
In the Radio Options section, you Add Radio Options to your Radio Group component.
- Enter Option Text. This is the text displayed for the Radio Group Option.
- Enter Option Value. This can be text or a number as needed. This value can be saved into a variable by enabling in the Behaviour section for the Radio Group component.
Add, duplicate, or delete Radio Options as needed.
In the Behaviour section, you toggle to enable the setting Save User Answer to Variable. By default, this setting is disabled. If enabled, Select Variable or Create Variable.
Select Variable Save Type. Variable Save Type controls how the learner's selected value affects the value in the variable. Replace: replaces the current value of the variable with the value the learner saves in the component. Concatenate: merges the option value to the variable.
By default, Variable Save Type is set to Replace.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.