Text Area Component

This component is suitable for use when creating accessible courses.

The Text Area component displays a text area into which the learner can input a text-based answer. The entered text can be saved to a variable.

This article provides an overview of the Text Area component, as well as component setup and behavior.

Component overview

The Text Area component is an interactive component that lets the learner enter text into an input field in the course. The Text Area component is flexible and, with the configuration set to Allow Editing, the learner can edit the entered text after submitting it. The text entered can also be saved to a Variable.

The Text Area 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*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.

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

Text Area section

1. In the Text area section, start by setting how the text area should display. By default, this is set to Text Area. Text Area allows multiple lines of text. The alternative option is Text Input. Setting Display to Text Input displays one single line.
2. Enter some Placeholder text that the learner will see inside the Text Area or Text Input box.
3. Enter Submit Button Text that will be shown on the submit button.
4. Enter Submitted Label Text that will be displayed once the button has been clicked.

1. Toggle to Allow Editing.
2. Enter Edit Button text, as needed.
3. Enter a Text Area ARIA Label for screen readers, as needed.

Behavior section

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

Select Variable Save Type. Variable Save Type controls how the user's entered text affects the value in the variable. Replace: replaces the current value of the variable with the value (text) the user saves in the component. Concatenate: merges the text entered to the variable.

By default, Variable Save Type is set to Replace.

Appearance section

In the Appearance section, you toggle to Enable Minimum Height. The Minimum Height sets a minimum pixel height on the text area. By default, the Minimum Height is 300.

Component Examples

The Text Area component gives you a lot of flexibility. Below are examples that illustrate Text Area component setups:

Example 1 – Displays the Text Area component set to display Text Area as multiple lines of text.

Example 2 – Displays the Text Area component set to display Text Input as a single line. In the example, an answer has been submitted and a Submitted Label Text is shown.

Did this article help?

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