LIST BOX WIDGETS
© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
MOST COMMON USE
A list box shows a list of options from which the user can choose one or several options.
ADD, REMOVE, AND REORDER LIST BOX OPTIONS
To add and edit options in a list box, double-click the list box widget to open the "Edit List Box" dialog. Add an option to the list box by clicking the green "+" icon. Type the text of that option in the new list box item that gets created. To add several new options to the list box at once, use the "Add Many" button (make sure to separate each new option with a line break).
You can use the blue arrow icons to reorder the list box options. The red "x" icon deletes the currently-selected list item, and the red "x" with the dots next to it deletes all items currently in the list.
ALLOW MULTIPLE SELECTIONS
The list box can allow for multiple selections, but you must first enable this setting. To allow multiple selections, double-click on the list box and select the checkbox for "Allow multiple items to be selected by default".
Once allowed, multiple selections can be made in the HTML output by holding [CTRL] or [CMD] while clicking on several options.
LOCATION AND SIZE
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
Editable properties of a list box widget's formatting include text font and family, text color, and fill color. These properties can all be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.
SELECTING A LIST OPTION
In the generated prototype, the user can click a list box option to select it. To select multiple options at once, the user can hold [CTRL] or [CMD] while clicking options.
You can also dynamically change the selected option in a list box. Use the action "Set Selected List Option". You can choose a specific list option or use a variable to set the new selected list option. Learn about using variables here.
LIMITATIONS AND WORKAROUNDS
DYNAMICALLY ADDING AND REMOVING ITEMS
The options in a list box cannot be dynamically changed in the HTML output, but there are a couple of ways you can approximate the effect.
You can make a dynamic panel with multiple states, each containing a list box with different contents.
Alternatively, you can make a custom list box using shape widgets. In addition to allowing for variable contents, a custom list box can also have custom styling.
SET OR READ MULTIPLE SELECTIONS
When dynamically setting the selected option of a list box, you can only select one option; it isn't possible to simultaneously select multiple options via an interaction.
Only one selected option can be read, for example for being stored in a variable, even if multiple options are selected in the list box. The top-most selection option will be read or stored. To work around this limitation, make a custom list box with shape widgets.