Define option lists

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

📘

We are currently rolling out the option list editor to various components. Check back soon if it isn't yet available for you.

Many components present a list of options, such as the dropdown in a Select or the menu of a Split Button. Each option contains a number of settings depending on the component—value, label, caption, tooltip, and disabled, and more.

You can manually configure each option or dynamically generate them by mapping data from a query, transformer, or any other source.


Configure options manually

Select Manual mode in the Options settings of the Inspector to configure options using a reorderable list. This mode is best 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 + Add to add a new option and configure the available settings, or click an existing option to edit. You can duplicate or delete an option by clicking the ... icon.

Manually define each option and configure its settings.Manually define each option and configure its settings.

📘

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


Map data to generate options

Select Mapped mode in the Options settings of the Inspector to generate options from a data source. This is similar to using a .map method on an array: each item in your data source is mapped to each option. This mode is best suited for lists that contain:

  • A large number of options.
  • Options with a dynamic data source (e.g., from an API or database).
  • Options used by multiple components.

Specify a data source

Specify the data to evaluate in the Data source setting. Select from your queries or transformers, or switch to JavaScript mode (fx) to provide an array of values or an object of arrays by key. You can also reference data from anywhere in your app.

Select a data source to evaluate.Select a data source to evaluate.

📘

Selecting Use JavaScript or Use an array switches the field to an input. Click 𝘧𝑥 to switch back to a dropdown menu.


Configure mapped options

The Mapped options section contains settings that are evaluated for each item in your data source.

Use item to reference the current data source item being evaluated and i to reference the current index. For example, if the items in your data source have an id ([{ id: 1 }, { id: 2 }]), reference this using {{ item.id }} in any setting.

Evaluated data is mapped to nested option settings.Evaluated data is mapped to nested option settings.

📘

Retool sometimes configure settings automatically depending on the shape of the data source. You can always clear these values to set your own.

You can try mapping data to options using sample data available in your Retool app. First, create a new query:

  1. In the Query editor, create a new Resource query.
  2. Select the onboarding_db PostgreSQL resource.
  3. Enter select * from products; as the query.
  4. Click Save and Run.

Next, add and configure a Select component:

  1. Drag a Select component from the Component Library to the Canvas.
  2. Select Mapped mode.
  3. Set Data source to the query you created.

You can now map option settings using item.

Mapped option settingEvaluated item data
Value{{ item.id }}
Label{{ item.name }}
Caption{{ '$' + (item.unit_price_cents / 100 ).toFixed(2) }}
Tooltip{{ moment(item.created_at).format("MMM Do YY") }}
Disabled{{ item.quantity == 0 }}

Mapped options can be extended with JavaScript logic.Mapped options can be extended with JavaScript logic.

You can use JavaScript almost anywhere in Retool and create logic that provides greater flexibility. In this example, item.unit_price_cents and item.created_at are displayed in a more readable format, and options for products with quantity: 0 are disabled.


Did this page help you?