How to Build a High-Fidelity Multi-Select Dropdown with Interactive Events

Overview

This guide shows how to build a high‑fidelity multi‑select dropdown in Axure RP. The widget consists of a collapsed state that displays the chosen values, an expanded state that lists all options with checkboxes, and interaction logic that keeps the two states synchronized.

Component construction

Create a text input widget named Dropdown Text Input and place a down‑arrow icon next to it so the pair visually resembles a dropdown. Adjust border colour, corner radius and left padding for a clean look.

Drag a rectangle to serve as the container for the dropdown options. Set both X and Y shadow offsets to 0 so the container has a flat appearance.

Build the first option:

Drag a rectangle to act as the option background.

Set its text to Option 1 and adjust the left margin so the text does not touch the edge.

Place a checkbox widget to the left of the text.

Duplicate the first option to create additional items (e.g., Option 2 , Option 3 , …). Rename each option accordingly and group all option widgets into a single Option Set . Then combine the option set with the container rectangle.

Define a mouse‑over interaction for each option rectangle to change its background colour, giving visual feedback when the cursor hovers over an item.

Group the Option Set and the Dropdown Text Input into a dynamic panel . Name the panel DropdownPanel and set its initial state to Collapsed . Create a second state called Expanded that contains the full option list.

Duplicate the Expanded state to create the Collapsed state. In the collapsed state delete the option list so only the input box and arrow remain.

Add an OnClick interaction to each checkbox:

OnClick
  SetVariableValue LVAR2 = "Option 1"   // use the option's text
  SetPanelState DropdownPanel = Expanded   // keep panel open while selecting
  SetText Dropdown Text Input = LVAR2

This copies the option's label into the input field when the user checks the box.

Copy the same interaction to the remaining checkboxes, changing the LVAR2 value to the corresponding option text.

Add an OnUncheck interaction for each checkbox to remove the option text from the input field when the user deselects it:

OnUncheck
  SetVariableValue LVAR2 = ""   // clear variable
  SetText Dropdown Text Input = Replace(CurrentText, "Option 1", "")

Repeat for all options, updating the option string accordingly.

Duplicate the uncheck interaction for the other options, adjusting the option string in the Replace call.

Switch from collapsed to expanded state when the user clicks the input box:

OnClick (Dropdown Text Input)
  SetPanelState DropdownPanel = Expanded

When the down‑arrow in the expanded state is clicked, collapse the panel back to the collapsed state:

OnClick (Down Arrow)
  SetPanelState DropdownPanel = Collapsed

After collapsing, ensure the input field shows the concatenated list of selected options. Use a SetText action that joins all checked option strings (e.g., using a global variable or repeated Append calls).

OnPanelStateChange (to Collapsed)
  SetText Dropdown Text Input = Join(SelectedOptions, ", ")

Result

The final widget behaves like a native multi‑select dropdown: clicking the collapsed field expands the list, checking or unchecking items updates the displayed text, and clicking the arrow collapses the list while preserving the chosen values.