Skip to main content

Dropdown

Creates a dropdown menu with a list of options that can be selected. The selected option can be used to filter queries or in markdown.

To see how to filter a query using a dropdown, see Filters.

dropdown
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
/>

Examples

dropdown using a query
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
/>

With a Title

dropdown with title
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
title="Select a Category"
/>

With a Default Value

dropdown with a default
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
title="Select a Category"
>
<DropdownOption valueLabel="All Categories" value="%" />
</Dropdown>

Note that "%" is a wildcard character in SQL that can be used with where column_name like '${inputs.name_of_dropdown}' to return all values.

With Hardcoded Options

dropdown with hardcoded values
<Dropdown name=name_of_dropdown>
<DropdownOption valueLabel="Option One" value="1" />
<DropdownOption valueLabel="Option Two" value="2" />
<DropdownOption valueLabel="Option Three" value="3" />
</Dropdown>

Alternative Labels

dropdown with alternative labels
<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
label=column_name_containg_label
/>

Filtering a Query

<Dropdown
data={query_name}
name=name_of_dropdown
value=column_name
/>

```sql filtered_query
select *
from source_name.table
where column_name like '${inputs.name_of_dropdown}'
```

Options

NameDescriptionRequired?OptionsDefault
nameName of the dropdown, used to reference the selected value elsewhere as {inputs.name}Yes--
dataQuery name, wrapped in curly bracesNoquery name-
valueColumn name from the query containing values to pick fromNocolumn name-
defaultValueValue to use when the dropdown is first loaded. Must be one of the options in the dropdown.No-First value in dropdown
labelColumn name from the query containing labels to display instead of the values (e.g., you may want to have the drop-down use `customer_id` as the value, but show `customer_name` to your users)Nocolumn nameUses the column in value
titleTitle to display above the dropdownNostring-
orderColumn to sort options byNocolumn nameUses the same order as the query in `data`
whereSQL where fragment to filter options by (e.g., where sales > 40000)NoSQL where clause-

The DropdownOption component can be used to manually add options to a dropdown. This is useful to add a default option, or to add options that are not in a query.

Options

NameDescriptionRequired?OptionsDefault
valueValue to use when the option is selectedYesstring-
valueLabelLabel to display for the option in the dropdownYesstringUses value