Working with select components

A quickstart on using dropdowns and multiselects in Retool

What we’re going to do

Most internal tools require components to filter and edit your data. Retool provides a bunch of different options: we’ll walk through how to use the dropdown and multiselect components to make your UI easier to work with. If you want to dive in, we built a quick Retool app the shows off these components and their properties:

Throughout this tutorial, we’ll assume the position of an e-commerce company building an admin panel for our customer support team. We’ll use select components to build our UI for reading and filtering order data.

Working with select components

Dropdown and multiselect components have almost identical settings in Retool: we’ll walk through our sample use case with a dropdown component, but the principles apply to multiselects (and other components!) too.

Dropdown components let you select one value from a list of values. To get one working, you’ll need to provide an array of values for the dropdown to display. You can also provide display labels that map to those values if your actual data isn’t very human readable. Let’s get started!

Back to our e-commerce example – we want to make it easy for our support agents to quickly filter for a specific order status. Our internal orders database has 3 possible order statuses: received, returned, and placed. We can use a dropdown component to let a user choose one of these, and update our query accordingly.

We’ve got a Postgres database with an orders table, and a simple SELECT * query populating a table component in Retool.

To get started, we’ll drag a dropdown component onto the canvas right above our table, and update the name (ordersDropdown) and label (Order Status) to make things easier to read and work with.

The bare minimum for working with a dropdown is an array of values that your users will select from. Let’s update the Values field to an array of our possible order statuses: ["received", "returned", "placed"]. You should see these populate the dropdown right away. Keep in mind that whatever you put in the Values field must be an array - a regular string or object will not work. The values in the dropdown will appear in the order of the array.

The last step is to hook up this dropdown to our getOrders query. We’ll add in a WHERE clause that filters the orders table for orders with the status in the dropdown. Because our dropdown doesn’t need to have a value selected, we’ve added in an OR statement that handles the case where the dropdown is empty.

That’s it! You’ve got a working filter. There’s a lot more you can do with dropdown components, though - here are a few things to look out for.

1. Dropdown display values

Our values for order status are fairly human readable, but that might not be the case for your data source: dropdown components let you provide display labels that map to your values and make your UI a bit smoother. Back to our e-commerce example, we might want to capitalize our order values for our users. We can do that by providing an array of labels in the Display values field:

Retool maps display values to underlying values in the order that arrays are provided, so make sure to pay attention to how your arrays are organized. If we wanted to be really slick, we could also have used {{ orderDropdown.values.map(value => _.capitalize(value)) }} in the Display values field to automatically capitalize the values provided in the Values field.

2. Default dropdown values

Dropdown components let you provide an initial value, as well as disable the clear button so that a value is always selected. The Initial value field takes a value, not a label - you need to provide a value that exists in your Values array. If you have display values configured, the dropdown will automatically display the label that maps to the value you’ve provided in the Initial value field. In our example, we’ve put in “received” and not “Received” - the latter would not work!

If you scroll down on the dropdown settings, you’ll find a toggle that allows you to disable the “clear” button. If you want to force your UI to always have a dropdown option selected, this is your ticket. This also lets us update our getOrders query, since we don’t need account for an empty dropdown anymore:

3. Dynamic dropdown values

Keep in mind that you can write Javascript anywhere in Retool via {{ }}. That means you can dynamically populate your dropdown values instead of hardcoding them. In our example, we could pull all of the unique values for status in our query’s data using {{ _.uniq(getOrders.data.status) }} The _.uniq function is from Lodash, which comes pre-installed in Retool.

There’s one problem though: if you use the same query to populate your table and to populate your dropdown’s values array, you’ll end up with a dependency loop - filtering for one value will limit your query to that value, which will then get your dropdown stuck on that one value. To fix this, we recommend setting up a second query called getOrderStatuses that gets the unique values for status, and you can pipe that directly into the dropdown Values field.

4. Misc. settings

Retool provides a bunch of other useful settings for dropdown components:

  • Set placeholder text
  • Toggle fuzzy matching for dropdown search
  • Validation (docs coming soon)
  • Set a max number of results to display

Check our components reference for all of the methods and properties available.

Working with multiselect components

Multiselect components follow an almost identical format to dropdown components, but with one twist - you can select multiple values. That difference means you’ll need to adjust how you reference component values in your queries and your app. Let’s run through our e-commerce example again, but using a multiselect component instead of a dropdown. To set the stage, we’ve got a getOrders query that populates our ordersTable table.

We’ll start by dragging a multiselect component onto the canvas above our table, naming it orderSelect, and adding a label of Order Status(es).

To get some options into our multiselect, we need to provide an array in the Values field. We’ll hardcode our order statuses here with ["received", "returned", "placed"], but remember that you can write Javascript anywhere in Retool with {{ }}, so you can set these values dynamically. For our display values, we’ll put in ["Received", "Returned", "Placed"] to make things a bit prettier for our users.

To make this multiselect actually do something, we’ll need to connect it to our getOrders query. With dropdowns, users can only select one value, so the SQL was pretty straightforward; but with a multiselect, a user can pick multiple values. Here’s the SQL query we’ll use:

select * 
from orders
where {{ orderSelect.value.length === 0 }} 
OR status = ANY({{ orderSelect.value }});

The {{ orderSelect.value.length === 0 }} piece returns true if no options are selected in the multiselect, so the query will return all results. If there are values in selected by the user, the status = ANY({{ orderSelect.value }}) will filter for those values.

Another neat thing about multiselects - you can allow users to define their own values with the Allow user defined values toggle. This won’t work very well here (our order statuses are discrete) but can be useful if you’ve got a lot of values to filter for. The new value gets put straight into the multiselect - it won’t update your provided arrays for Values or Display values.

One more thing to look out for: when providing default values for a multiselect (the Default values to select field), you must use an array and not a single value. For example, if we wanted to select the "received" status as default, you'd put ["received"] in the Default values to select field.

Other select related components in Retool

Dropdowns and multiselects are our most popular select components, but there are a bunch of others that follow similar formats and might be better fits for your UI:

You can reference all available Retool components and their properties here.


Did this page help you?