Introduction
TheSelect
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.
Options
Predefined options
The most basic usage of aSelect
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.
Dynamic options
You can also use a query to load the options dynamically. This can be useful when you have a large number of options, when the options change frequently or when you want to filter the options based on other parameters.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.
Mixed options
You can mix both predefined and dynamic options by using theoptions
and query
props together. The dropdown will first show the predefined options and then load the dynamic options.
Default value
You can also add a default value to the dropdown by using thevalue
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.
Search box
If you have a large number of options, you can enable a search box to make it easier for the user to find the option they are looking for. You can do this by adding thesearchable
prop.
Text customization
You can customize the text that is displayed in the dropdown with the following options: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 selection
You can also allow multiple selections by adding themultiple
prop. This will display a checkbox next to each option that the user can select.
{#each}
block in your queries.