Checkbox Group Component

The Checkbox Group component is an interactive component that lets you allow learners to select one or more options from a checkbox group.

This article provides an overview of the Checkbox Group component, component setup and behavior, and provides examples of Checkbox Group component configurations.

Component overview

The Checkbox Group component is an interactive component that lets your learners select one or more options from a checkbox group. The Checkbox Group component is flexible, and 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 different variables, as needed.

The Checkbox Group component is fully responsive.

Component set up

Follow these steps to add the Checkbox Group component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Checkbox Group component.
3. Click the Checkbox Group component and select Add Left, Add Full, or Add Right .

Click the Edit Component icon on the newly added Checkbox Group component to begin set up.

General section

In the General section:

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

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

1. Add Checkbox Group Instruction Text that tells users how to use the component.
2. 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 Checkbox Group component that can display an icon and label prior to the Checkbox Group component completion, which changes to a different icon and label once the Checkbox Group component is completed.

Checkbox Group section

1. In the Checkbox Group section, you set the number of Columns to your Checkbox Group component. By default, this is set to three columns for desktops, two columns for tablets, and one column for mobiles.
2. Enter a number for Minimum Checked Options that must be checked before submitting the component. By default, this is set to 0.

1. Enter Submit Button Text that will be shown on the submit button.
2. Enter Submitted Label Text that will be displayed once the button has been clicked.
3. Toggle to Allow Editing. Enabling this setting allows the learner to edit the answer after submitting it.
4. Enter Edit Button text, as needed.

Component Examples

The Checkbox Group component gives you a lot of flexibility. Below are examples that illustrate the Checkbox Group component setup:

Example 1 – displays the Checkbox Group component before one or more options have been selected and submitted.

Example 2 – displays the Checkbox Group component after submitting an answer. The Submitted Label Text is shown, and in this example, the setting Allow Editing is enabled, and the Edit Button is displayed below the component.

Checkbox Options section

In the Checkbox Options section, you Add Checkbox Options to your Checkbox Group component.

For each Checkbox Option:

1. Enter Option Text. This is the text displayed for the Checkbox Option.
2. Toggle to enable Save Checked State to Variable. Select Variable or Create Variable for the specific Checkbox Option. By default, this setting is disabled.

Heads up!

It is possible to enable or disable Save Checked State to Variable for each single Checkbox Option.

Add, duplicate, or delete Checkbox Options as needed.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.