Radio Group Component

This component is suitable for use when creating accessible courses.

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.

Component overview

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

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Include a Radio Options Group ARIA Label, 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. This widget 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

1. 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.
2. Enter Submit Button Text that will be shown on the submit button.

Note: 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.

1. Scroll down and enter Submitted Label Text that will be displayed once the button has been clicked and the answer has been submitted.
2. Toggle to Allow Editing. Enabling this setting allows the learner to edit the answer after submitting it.
3. Enter Edit Button text, as needed.

Component Examples

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.

1. Enter Option Text. This is the text displayed for the Radio Group Option.
2. 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.

Behavior section

In the Behavior 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.