About Docs GitHub Discord Sign in

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 `` 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: ""
      results: items
      value: login
      label: ""
      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: ""
        category: "electronics"
      results: data.products
      value: ""
      label: " ()"
      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.

On this page