List box widgets show a list of options from which the user can choose one or several options. The list box widget is located in the Forms section of the Default widget library.
Adding, Removing, and Reordering List Box Options
To add and edit options in a list box, double-click the list box widget on the canvas or in the Outline pane to open the Edit List Box dialog. You can add a single option to the list box by clicking Add and typing the text of the new option in the field that appears. Alternatively, you can add several new options to the list box at once by clicking Edit Many.
To reorder the list box options, select an option and use the Up and Down buttons at the top of the dialog. To delete an option, select it and click Delete, or click Edit Many and clear the text area to delete all the options at once.
Allow Multiple Selections
The list box can allow for multiple selections, but you must first enable this setting. To allow multiple selections, double-click the list box and check Allow multiple items to be selected by default at the bottom of the Edit List Box dialog.
Once this setting is enabled, you can select multiple options in the web browser by holding CTRL or CMD while clicking on several options.
Defining a Default Option
Normally, a list box doesn't have any of its options selected by default in the web browser, but you can change this in the Edit List Box dialog. Double-click the list box widget and then check the box next to one of the options in the dialog.
You can define multiple default options if you've enabled multiple selections.
Disabling a list box prevents users from interacting with it in the web browser. This also activates the widget's Disabled style effect, making it appear greyed-out.
There are two ways to disable a widget:
Check the Disabled checkbox at the bottom of the Interactions pane.
Disable the widget dynamically in the web browser with the Enable/Disable action. You can do this as part of any interaction, such as when the page loads or when a button is clicked.
You can dynamically enable a disabled widget in the web browser with the Enable/Disable action. Check out the Terms and Conditions tutorial for an example of how this can be done.
Selecting List Options
In the web browser, you can click a list box option to select it. If you have enabled multiple selections, you can hold CTRL or CMD while clicking to select multiple options.
You can also dynamically change the selected option in a list box with the Set Selected List Option action. You can choose a specific list option or use a variable value to set the new selected option. (See limitations below.)
Capturing and Evaluating the Selected Option
You can access the selected option of a list box via the selected option of value option in interactions and conditions. For example, you can set the value of a global variable to the selected option of a list box in order to carry that value over to a different page. You can also evaluate a list box's selected option in a condition to only execute a certain case if the option matches a particular value. (See limitations below.)
Pressing the ENTER key while a list box has focus in the web browser can fire the Click or Tap event of another widget on the page, known as the list box's "submit button."
To assign a submit button to a list box:
Select the list box and click Show All in the lower section of the Interactions pane.
Choose from a list of eligible widgets in the Submit Button dropdown.
To unassign the submit button, click Unassign Submit Button at the bottom of the dropdown.
Limitations and Workarounds
Dynamically Adding and Removing List Box Options
The options available in a list box cannot be dynamically altered in the web browser, but you can simulate the effect by making a dynamic panel with multiple states, each containing a list box with different contents. When you want the options in your list box to change, switch the dynamic panel's state.
Set or Read Multiple Selections
When dynamically setting the selected option of a list box with the Set Selected List Option action, you can only select one option; it isn't possible to simultaneously select multiple options via an interaction.
To work around these limitations, make a custom list box with shape widgets.
Tab order for list boxes and other form widgets is determined by their layer depth, as shown in the Outline pane. You can learn more about this and how to change a widget's tab order in the Organizing Widgets article.