Create a dropdown with options for a parameter.
Select
component is used to create a dropdown with predefined options for a parameter. This can be useful when you want to provide a list of options for a parameter that the user can choose from, either to limit the possible values or to make it easier for the user to select a value.
This component can be used both with predefined options and with dynamic options that are loaded from a query result.
Select
is to provide a list of options that the user can choose from. You can do this by using the options
prop to specify an array of options.
value
and label
properties.
value
property is what will be used when running any queries using the parameter, while the label
property is just what will be displayed in the dropdown.
query_name
is the name of a query that will be ran to load the options. If the results of the query contain a value
and a label
property, those will be used as the value and label for the options. Otherwise, the first column will be used as both.
If you want to use a different column as the value, you can specify the values
and labels
props to do so.
options
and query
props together. The dropdown will first show the predefined options and then load the dynamic options.
value
prop. This will preselect the option with the given value when the page is loaded, if it is not overridden by a value in the URL.
searchable
prop.
label
, description
and placeholder
.
label
is the text that is displayed above the dropdown.description
is the text that is displayed below the dropdown.placeholder
is the text that is displayed in the dropdown when no option is selected.multiple
prop. This will display a checkbox next to each option that the user can select.
{#each}
block in your queries.