The Dropdown component

The Dropdown component lets you add a dropdown to your project. You specify the options listed in the dropdown.

To use the Dropdown component in your project:

  1. Open the Components panel, then the UI folder.
  2. Drag the Dropdown  component to the stage.
  3. In the Dropdown properties section of the Properties panel, click the Options field to configure the dropdown options.
    1. For each option you want to add:
      1. Click Add Option.
      2. Enter a label (the text visible to the user).
      3. Enter a value (the value of the dropdown if the user selects this option).
    2. Choose which option is the default. The default option is selected in the dropdown when the page initially loads.
    3. Click OK.
  4. You may want to use the Label component to display text before the dropdown.


Property Description
Name The component name.
Options The list of options available in the dropdown. Click this field to configure the list.

Events and actions

Events sent by the Dropdown component

You can trigger other actions based on the following Dropdown component event:

Event Description
Change Sent when the selected option changes.

To select this event in the Event dialog, set the Dropdown component as the target.

Learn how to configure events.


You can't interact with UI components inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser. The appearance of UI components may vary depending on the browser.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue