How to Create Dropdown Menus in Retool

Drag a Select component from the Input section of the component panel. In the Inspector's General section, set the Data Source to 'Manual' (the default). Click '+ Add option' to add entries. Each option has a Label (displayed to the user) and a Value (what is stored and referenced in expressions). For example, Label: 'Active', Value: 'active'. Add as many options as needed. The component is automatically named select1 — rename it in the Name field at the top of the Inspector.

1// Static options example — status dropdown
2// Label: Active    Value: active
3// Label: Inactive  Value: inactive
4// Label: Pending   Value: pending
5
6// Access selected value elsewhere:
7{{ statusSelect.value }}
8// Returns: 'active' | 'inactive' | 'pending'

When options change frequently or exist in a database, load them dynamically. Create a Resource Query named getCategories with 'Run on page load' enabled. Select the Select component and change Data Source from 'Manual' to 'Mapped'. Set Options to {{ getCategories.data }}. Set Option Label to {{ item.category_name }} and Option Value to {{ item.id }}. Retool iterates over the array, using each row's category_name as the display label and id as the stored value.

1-- SQL query: getCategories (Run on page load: ON)
2SELECT id, category_name
3FROM categories
4WHERE is_active = true
5ORDER BY category_name ASC;
6
7// Select component Inspector:
8// Options: {{ getCategories.data }}
9// Option Label: {{ item.category_name }}
10// Option Value: {{ item.id }}
11// Placeholder: 'Select a category'

Use {{ select1.value }} anywhere in the app to read the currently selected option's value. This is reactive — when the user changes the selection, all expressions referencing select1.value update automatically. Common uses: filter a Table's data source query, display related information in a Text component, or control another Select's options as a dependent dropdown.

1// In a SQL query — filter by selected category:
2SELECT * FROM products
3WHERE category_id = {{ categorySelect.value }}
4ORDER BY name ASC;
5
6// In a Text component — display selection description:
7{{ getCategories.data.find(c => c.id === categorySelect.value)?.description || '' }}
8
9// In a Hidden property — show field only for a specific selection:
10{{ categorySelect.value !== 'digital' }}

When the dropdown selection changes, you often need to trigger a query to refresh related data. Select the Select component. In Inspector → Interaction → Event Handlers, click '+ Add'. Set Event to 'Change', Action to 'Trigger query', and choose the query to run (e.g., getProducts). Each time the user selects a different option, the query runs automatically with the new {{ categorySelect.value }}. Add multiple event handlers if you need to trigger multiple queries or clear other components.

1// Inspector → Interaction → Event Handlers
2// Event: Change
3// Action: Trigger query → getProducts
4
5// To also reset a child select:
6// Second handler on the same Change event:
7// Action: Control component → productSelect → resetValue
8
9// To navigate on selection:
10// Action: Open URL → /app/{{ categorySelect.value }}

Drag a Multiselect component when users need to select several values (tags, roles, filter criteria). Configuration is identical to Select: set Options from a query, set Option Label and Option Value. The key difference: {{ multiselect1.value }} returns an array (e.g., [1, 4, 7]) instead of a single value. Use this array in SQL with the ANY() operator or pass it to a REST API as a comma-separated string.

1// Multiselect value is always an array:
2{{ multiselect1.value }}
3// Returns: [1, 4, 7]
4
5// SQL with PostgreSQL ANY():
6SELECT * FROM products
7WHERE category_id = ANY({{ multiselect1.value }});
8
9// Display as comma-separated labels:
10{{ multiselect1.value.map(v => getCategories.data.find(c => c.id === v)?.category_name).join(', ') }}
11
12// Pass to REST API as query string:
13// URL parameter: ids={{ multiselect1.value.join(',') }}

The Cascader component handles nested hierarchical selections like Country > State > City or Category > Subcategory. Its Options expect a tree structure with children arrays. Build the tree in a transformer. Set the Cascader's Options to {{ categoryTree.value }} where categoryTree is a transformer that restructures flat query data into the tree format. The selected value is {{ cascader1.value }} which returns an array of selected values at each level, e.g., ['electronics', 'phones'].

1// Transformer: categoryTree (reads from getCategories.data)
2// Input: flat array with parent_id field
3// Output: nested tree for Cascader
4
5const categories = getCategories.data;
6const rootItems = categories.filter(c => !c.parent_id);
7
8function buildTree(parentId) {
9  return categories
10    .filter(c => c.parent_id === parentId)
11    .map(c => ({
12      label: c.name,
13      value: c.id,
14      children: buildTree(c.id),
15    }));
16}
17
18return rootItems.map(c => ({
19  label: c.name,
20  value: c.id,
21  children: buildTree(c.id),
22}));
23
24// Cascader selected value:
25{{ cascader1.value }}
26// Returns: ['electronics', 'phones'] for a 2-level selection

To pre-select a dropdown option, use the Default Value field in the Inspector. Set it to the value (not the label) of the option to pre-select. For dynamic defaults from a table row: {{ table1.selectedRow.data.category_id }}. For defaults from URL params: {{ url.searchParams.category }}. Remember: Default Value is applied at component mount time. To change the selection after mount, use await select1.setValue(newValue) from a JS Query — and remember setValue() is asynchronous.

1// Default Value expressions:
2
3// From selected table row:
4{{ table1.selectedRow.data.category_id }}
5
6// From URL param:
7{{ url.searchParams.categoryId }}
8
9// Static default:
10// 'active' (type directly in the Default Value field)
11
12// JS Query: runtime update (async!)
13await categorySelect.setValue(newCategoryId);
14// Do NOT read categorySelect.value on the next line —
15// setValue is async; the value may not have updated yet.