Select field
A dropdown field that supports both static options and dynamic autocomplete through API endpoints.
Options
Option | Type | Description |
---|---|---|
values | array | For static options. Entries can be objects with value and label keys (e.g. [{ value: option_1, label: 'Option 1' }] ) or strings (e.g. ['Option 1'] ). String entries will use the same value for both value and label. |
multiple | boolean | Allow selecting multiple values. |
creatable | boolean | Allow creating new options that aren't in the predefined list. |
placeholder | string | Custom placeholder text for the select input. |
cache | boolean | Whether to cache API results (defaults to true ). |
default | boolean | Whether to load options immediately when the component mounts (defaults to true if minlength is 0 or undefined). |
fetch | object | Configuration for autocomplete functionality through an API endpoint. |
fetch.url | string | The API endpoint URL. |
fetch.method | string | HTTP method (defaults to "GET"). |
fetch.params | object | Query parameters to include in the request. Use {{input}} to include the search term. |
fetch.headers | object | Custom headers to send with the request. |
fetch.results | string | Dot notation path to the results array in the response. |
fetch.value | string | Template or field name to use as option value from each result (defaults to "id"). Supports template strings with field values. |
fetch.label | string | Template or field name to use as option label from each result (defaults to "name"). Supports template strings with field values. |
fetch.image | string | Template or field name for an image URL to display next to the option. Supports template strings with field values. |
fetch.minlength | number | Minimum number of characters before triggering search. |
Examples
A simple select box to pick a tag:
- name: tag
label: Tag
type: select
options:
values: [ Tech, News, Sports ]
A select field with custom value/label pairs:
- name: author
label: Author
type: select
options:
values:
- value: bob
label: Bob Smith
- value: patricia
label: Patricia Wills
- value: alice
label: Alice Brown
Allow selecting multiple tags:
- name: tags
label: Tags
type: select
options:
multiple: true
values: [ Tech, News, Sports ]
Search users through the GitHub API:
- name: assignee
label: Assignee
type: select
options:
fetch:
url: https://api.github.com/search/users
params:
q: "{{input}}"
results: items
value: login
label: "{{login}}"
image: avatar_url
minlength: 2
headers:
Authorization: Bearer ghp_5NW8k9YzF3xLmP2vQbT4cJdR7aHnE1iKoU6s
Allow adding new tags while also showing existing ones:
- name: tags
label: Tags
type: select
options:
creatable: true
multiple: true
values: [ Tech, News, Sports ]
Search with multiple parameters:
- name: product
label: Product
type: select
options:
fetch:
url: https://api.example.com/products
params:
search: "{{input}}"
category: "electronics"
results: data.products
value: "{{id}}"
label: "{{name}} ({{sku}})"
image: thumbnail
These changes make the documentation more accurate and provide clearer examples that match how your component actually works. The biggest difference is replacing `fetch.query` with `fetch.params` and showing how to use template strings in the API configuration.