Select Component

This component is suitable for use when creating accessible courses.

The Select component lets the learner select an option from a drop-down list. The chosen option value can also be saved to a Variable.

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

Component overview

The Select component is an interactive component that lets the learner select an option from a drop-down list. The Select component is flexible and, with the configuration set to Allow Editing, the learner can select another option after submitting. The selected option value can also be saved to a Variable.

The Select component is fully responsive and can be added to your Evolve course as a left-handed, full-width, or a right-handed component.

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 the page 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.

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 Select component. This widget can display an icon and label prior to the Select component completion, which changes to a different icon and label once the Select component is completed.

Select section

In the Select section:

1. Enter some Placeholder text. This is the text displayed on the Select component prior to the learner selecting an option.
2. Enter Submit Button Text that will be shown on the submit button.
3. Enter Submitted Label Text that will be displayed when an answer has been submitted.
4. Toggle to Allow Editing. By default, this setting is enabled.
5. Enter Edit Button text, as needed.
6. Enter a Select ARIA Label for screen readers, as needed.

Note: Allowing Editing does not reset the component completion status.

Select Options section

In the Select Options section, you Add Select Option items to your Select component.

1. Enter Option Text. This is the text displayed in the component for your Select Option item.
2. Enter Option Value. This value can be saved to a Variable if this setting is enabled in the Behaviour section.

Add, duplicate, or delete Select Option Items as needed.

Behavior section

In the Behavior section, you toggle to Save User Answer to Variable. When enabled, you Select Variable or Create Variable.

Select a Variable Save Type. Variable Save Type controls how the learner’s selected option affects the value in the variable. Replace: replaces the current value of the variable with the value the user saves in the component. Concatenate: merges the option value to the variable. By default, Variable Save Type is set to Replace.

Component Examples

The following examples show how the Select component can be displayed in an Evolve course:

Example 1 – This example shows the Select component before an option has been selected.

Example 2 – This example shows the Selected component after submitting an answer and the Submitted Label Text is displayed below the Select component options. The setting Allow Editing is enabled and the Edit button is shown with the text “Edit Answer.”

Did this article help?

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