The Dropdown component provides a flexible way to let users select one or more values from a list. It supports both static options and dynamic data from queries.
Basic Usage
<script>
import { Query } from '@evidence-dev/sdk/usql';
const categories = Query.create(`
SELECT DISTINCT category
FROM products
ORDER BY category
`);
</script>
<Dropdown
name="selectedCategory"
data={categories}
value="category"
/>
Props
Unique identifier for the input. Used to reference the selected value in queries using {inputs.name}
Label displayed above or within the dropdown button
Query result object to populate dropdown options. When provided, requires value prop.
Column name from query to use as the option value. Required when using data prop.
Column name from query to use as the display label. Defaults to the same column as value.
When true, allows multiple values to be selected
Initial value(s) to select. Use array for multiple selections.<Dropdown name="status" defaultValue="active" />
<Dropdown name="tags" multiple defaultValue={["tag1", "tag2"]} />
When true, no option is selected by default (even if data is available)
When true and multiple is enabled, all options are selected by default
SQL ORDER BY clause to sort options<Dropdown name="category" data={categories} value="name" order="name DESC" />
SQL WHERE clause to filter options<Dropdown name="active_users" data={users} value="id" where="status = 'active'" />
Help text displayed as an info icon next to the title
Whether to hide the dropdown when printing the page
When true, hides the “Select all” option in multi-select dropdowns
Static Options
You can provide static options using DropdownOption components:
<Dropdown name="view">
<DropdownOption value="all" />
<DropdownOption value="active" />
<DropdownOption value="archived" />
</Dropdown>
Dynamic Options from Query
<script>
const products = Query.create(`
SELECT
product_id as value,
product_name as label
FROM products
`);
</script>
<Dropdown
name="product"
data={products}
value="value"
label="label"
title="Select Product"
/>
Multi-Select
<Dropdown
name="regions"
data={regionData}
value="region_code"
label="region_name"
multiple
title="Select Regions"
/>
Using Selected Values
Access the selected value(s) in your queries:
Single Select
SELECT *
FROM sales
WHERE category = {inputs.selectedCategory}
Multi-Select
SELECT *
FROM sales
WHERE region IN {inputs.regions.value}
Single Select
{
label: "Electronics", // Display label
value: "'electronics'", // SQL-safe value
rawValues: [{ // Original option object
label: "Electronics",
value: "electronics"
}]
}
Multi-Select
{
label: "North, South, East", // Comma-separated labels
value: "('north','south','east')", // SQL IN clause format
rawValues: [ // Array of selected options
{ label: "North", value: "north" },
{ label: "South", value: "south" },
{ label: "East", value: "east" }
]
}
Examples
Filter with Query and Static Options
<script>
const categories = Query.create(`
SELECT DISTINCT category FROM products
`);
</script>
<Dropdown
name="categoryFilter"
data={categories}
value="category"
defaultValue="All"
>
<DropdownOption value="All" />
</Dropdown>
Dependent Dropdowns
<Dropdown name="country" data={countries} value="code" label="name" />
<Dropdown
name="city"
data={cities}
value="city_id"
label="city_name"
where="country_code = {inputs.country}"
/>
Search Functionality
The dropdown includes built-in search. When users type in the input field, options are automatically filtered by label.