Skip to main content

Define option lists

Use the option list editor to configure options manually or map data to generate them dynamically.

Select option mode

For components that support multiple options, you can either manually configure each option or dynamically map them from an array of data, such as query results or transformer values. Select either the Manual or Mapped mode to use the respective method.

Select Manual mode in the Content settings of the Inspector to configure options using a reorderable list. This mode is suited for lists that contain:

  • A small, maintainable number of options.
  • Options that are static (e.g., not from an API or database).
  • Options used by only one component.

Click + to add an option and configure the available settings, or click an existing option to edit. You can duplicate or delete an option by clicking the ••• icon.

The value (or key for some components) must be unique for each option. If duplicate values are found, only the first option is rendered.

Use options to trigger events

Certain components, such as Navigation, support options with event handlers. Manually defined options include an additional Event handlers setting that you can configure.

You can also reference a selected option when configuring a component-level event handler with item or the item's current index using i. For example, you can configure an event handler for Dropdown Button to display the selected option's label in a notification with {{ item.label }}.