Skip to main content
Basic Usage 
{% dropdown
    id="category_filter"
    data="demo_daily_orders"
    value_column="category"
/%}

​
Examples

​
With Static Options

With Static Options 
{% dropdown id="status_filter" %}
    {% option value="active" label="Active" /%}
    {% option value="inactive" label="Inactive" /%}
    {% option value="pending" label="Pending" /%}
{% /dropdown %}

​
Attributes

​
id
String
required
The id of the dropdown to be used in a filters prop
​
data
String
Name of the table to query
​
filters
Array
default:"[]"
Array of filter IDs to apply when querying for dropdown options
​
value_column
String
Column name to use as the value for each option, and the column to filter by when this dropdown’s id is used in the filters prop of a chart
​
label_column
String
Column name to use as the label for each option
​
options
Array
List of options to display in the dropdown
​
title
String
Text displayed above the dropdown
​
info
String
Information tooltip text
​
info_link
String
URL to link the info text to (can only be used with info)
​
info_link_title
String
Create a custom link title for the info link, placed after the info text (can only be used with info_link)
​
icon
String
Icon to display in the dropdown triggerAllowed values:
  • trending-up
  • trending-down
  • clock
  • calendar
  • check
  • x
  • info
  • alert-circle
  • help-circle
  • eye
  • eye-off
  • user
  • users
  • settings
  • cog
  • plus
  • minus
  • up
  • down
  • right
  • left
  • star
  • heart
  • search
  • file
  • file-text
  • home
  • mail
  • filter
  • share
  • bell
  • trash
  • credit-card
  • globe
  • key
  • croissant
  • map
  • rotate
  • rewind
  • bank
  • receipt
  • activity
  • chart-column
  • chart-pie
  • chart-no-axes-combined
  • goal
  • rocket
  • trophy
  • apple
  • cookie
  • donut
  • beef
  • cake
  • soup
  • utensils
  • milk
  • nut
  • pyramid
  • triangle
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • chevrons-down
  • chevrons-left
  • chevrons-right
  • chevrons-up
  • menu
  • external-link
  • check-circle
  • x-circle
  • edit
  • trash-2
  • copy
  • save
  • download
  • upload
  • send
  • refresh
  • redo
  • undo
  • folder
  • folder-open
  • image
  • file-image
  • user-plus
  • user-minus
  • user-check
  • lock
  • unlock
  • log-in
  • log-out
  • message-square
  • message-circle
  • phone
  • phone-call
  • bell-off
  • video
  • video-off
  • play
  • pause
  • stop
  • skip-back
  • skip-forward
  • volume
  • volume-1
  • volume-2
  • volume-off
  • volume-x
  • bookmark
  • tag
  • link
  • unlink
  • share-2
  • alert-triangle
  • loader
  • more-vertical
  • more-horizontal
  • grid
  • list
  • maximize
  • minimize
  • zoom-in
  • zoom-out
  • thumbs-up
  • thumbs-down
  • shopping-cart
  • dollar-sign
  • camera
  • printer
  • monitor
  • smartphone
  • laptop
  • calculator
  • cloud-sun-rain
  • sun-snow
  • thermometer-sun
  • thermometer-snowflake
  • cloudy
  • cloud-rain-wind
  • cloud-rain
  • wind
  • sun
  • cloud-snow
  • thermometer
  • cloud-drizzle
  • cloud-sun
  • cloud
  • cloud-lightning
  • snowflake
  • flame
  • atom
  • fuel
  • magnet
  • factory
  • tree-deciduous
  • waypoints
  • plug
  • dam
  • battery
​
initial_value
String | Array
Initial selected value(s)
​
select_first
Boolean
default:"false"
Automatically select the first option when the component loads
​
placeholder
String
Placeholder text displayed when no value is selected
​
search
Boolean
default:"false"
Includes a search input within the dropdown menu
​
multiple
Boolean
default:"false"
Allows multiple selections
​
clear
Boolean
default:"true"
Includes a clear button to unselect the selected value(s)
​
order
String
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
width
Number
Set the width of this component (in percent) relative to the page width

​
Available Filter Properties

When you reference a dropdown filter in inline queries using the {{filter_id.property}} syntax, the following properties are available:

​
.filter

Returns a complete SQL filter expression ready to use in WHERE clauses. Returns true when no value is selected.

​
.selected

Returns the selected value wrapped in quotes, suitable for SQL comparisons. Returns an empty string when no value is selected. Use with a fallback value.

​
.literal

Returns the raw unescaped selected value, useful for dynamic column selection or other non-quoted uses.

​
.label

Returns the label text for the selected option(s). If multiple values are selected, returns comma-separated labels. Falls back to the value if no label is defined.

​
.fmt

Returns the format string associated with the selected option. Useful for dynamically updating chart formatting based on the selected value. For multiple selections, returns the first value’s format.

​
Example Usage

{% dropdown
  id="category_filter"
  data="products"
  value_column="category"
  title="Product Category"
/%}

```sql filtered_products
select * from products
where {{category_filter.filter}}
For more details on using filters in SQL queries, see the Filters documentation.

​
Allowed Children